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

현재 버전	2017-07-06 02:46:37
선택 버전

댓글