one page scroll

 

코드펜  https://codepen.io/gamza/pen/RgJZzz?editors=1111

 

▣ 구상

  - 원페이지 웹을 만듭니다.

  - 네비게이션 메뉴 클릭시 해당 메뉴가 가리키는 컨텐츠로 스크롤이 이동합니다.

 

 

▣ 조건

 ➊  네비게이션

 ➋  컨텐츠

 ➌  네비게이션 클릭 이벤트 - 스크롤 이동

 

 

 

◆ 레이아웃 ( html, css )

1.  네비게이션 영역 / 컨텐츠 영역을 div 로 나눕니다.

2.  네비게이션을, 스크롤 이동에 영향받지 않고 화면상단에 고정시키기 위해 position : fixed 시킵니다.

3.  네비게이션과의 겹침 방지를 위해 컨텐츠를 네비게이션의 height 만큼 내려온 위치에서부터 추가합니다.  

4.  네비게이션과의 연동을 위해, 네비게이션 내부 <a> 태그 의 href 속성과 컨텐츠의 id를 각각 일치시킵니다.

 

● html

<div id="navigation">
    <ul>
        <li><a href="#SALMON"> SALMON </a> </li>
        <li><a href="#ROYALBLUE"> ROYALBLUE </a> </li>
        <li><a href="#GOLD"> GOLD </a> </li>
        <li><a href="#BLACK"> BLACK </a> </li>
    </ul>
</div>

<div id="wrap">
    <div id="SALMON"></div>
    <div id="ROYALBLUE"></div>
    <div id="GOLD"></div>
    <div id="BLACK"></div>
</div>

● css

*{margin:0px; padding:0px;} <!-- 약식초기화 -->

#navigation{
    position:fixed; 
	top:0px;
	left:0px;
	height:80px;
	width:100%; 
	background:#000;	  
	text-align:center;
	font-size:14px;
}
#navigation ul { list-style:none; margin-top:50px; }		   		
#navigation li { display:inline; margin-right:10px; }
#navigation li a { text-decoration:none; color:#FFF;}
#navigation li a:hover {color:#0F0;}

#wrap { width:100%;margin:0 auto;margin-top:80px; }

#SALMON{ background:salmon; height:1000px; }
#ROYALBLUE{ background:RoyalBlue; height:1000px; }
#GOLD{ background:Gold; height:1000px; }
#BLACK{ background:black; height:1000px; }

 

 

 

◆ 기능 ( jquery )

1.  네비게이션 메뉴 클릭 

2.  클릭된 <a> 태그의 href 를 id 로 가진 컨텐츠로 이동

3.  이동시에 스크롤 애니메이션 사용

 

● javascript

var speed = 700;    // 스크롤 스피드 수치로 사용할 변수 
	
//로직
function scrolling(obj){
	if (!obj){	// 예외처리, 현재는 기능적으로 필요한 부분은 아님, 관례적 사용
		$('html, body').animate({scrollTop:0},speed);
	}else{
		var posTop = $(obj).offset().top -80;	// posTop = 매개변수로 들어온 컨텐츠 obj 의 offset().top - 네비게이션 높이
		$('html, body').animate({scrollTop:posTop}, speed )	// body의 스크롤이동 : posTop
	}
};


$("ul li a").click(function(){	// 네비게이션 클릭시
	var direction = $(this).attr("href");	// direction = 클릭한 요소의 href 속성
	scrolling( direction );	// direction 을 인자로 함수 실행
	return false;	// 본래 이벤트 방지 
});