코드펜 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; // 본래 이벤트 방지 });