스크롤 메뉴(Scroll Menu) 구현해보기
주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다.
대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다.

<div class="header">
<h1>header</h1>
</div>
<div id="contents">
<div class="floating-menu">
<ul>
<li class="m"><a href="#section-01" class="menu-01"><span>메뉴 1</span></a></li>
<li class="m"><a href="#section-02" class="menu-02"><span>메뉴 2</span></a></li>
<li class="m"><a href="#section-03" class="menu-03"><span>메뉴 3</span></a></li>
<li class="btn-top"><a href="#header" class="menu-04"><span>상단으로</span></a></li>
</ul>
</div>
<div class="section-01 scroll">
<h2>섹션 1</h2>
</div>
<div class="section-02 scroll">
<h2>섹션 2</h2>
</div>
<div class="section-03 scroll">
<h2>섹션 3</h2>
</div>
</div>
<div class="footer"> 푸터단 </div>
Temp CSS
CSS
.header { position: relative; height: 200px; background-color: #ffccec;}
/* contents */
.section-01,.section-02,.section-03 { position: relative; height: 600px; }
.section-01 { background-color: #ffc8a2;}
.section-02 { background-color: #91b8ff;}
.section-03 { background-color: #a2ffbd;}
/* floating menu */
.floating-menu { position: fixed; right: 50px; top: 50%; z-index: 100; width: 128px;  margin: -220px 0 0 0; background-color: #d4cecf;; /*background: url("") 0 0 no-repeat;*/ }
.floating-menu li { margin: 0; *float: left; }
.floating-menu a { display: block; width: 123px; padding: 10px 0;color: #fff; text-align: center; border: 1px solid #464646; text-decoration: none;}
.floating-menu a.menu-04 { height: 20px; background: none; }
.floating-menu li.on a { background-color: #333; color: #fff;/*background: url("") 0 0 no-repeat;*/ }
.floating-menu li.on a.menu-01 {/* background-position: -131px 0;*/ }
.floating-menu li.on a.menu-02 {/* background-position: -131px -104px;*/ }
.floating-menu li.on a.menu-03 { /*background-position: -131px -219px;*/ }
.footer { height: 100px; background-color: #707070;}
스크롤 메뉴 스크립트
JAVASCRIPT
(function (global, $) {
var $menu     = $('.floating-menu li.m'),
$contents = $('.scroll'),
$doc      = $('html, body');
$(function () {
// 해당 섹션으로 스크롤 이동
$menu.on('click','a', function(e){
var $target = $(this).parent(),
idx     = $target.index(),
section = $contents.eq(idx),
offsetTop = section.offset().top;
$doc.stop()
.animate({
scrollTop :offsetTop
}, 800);
return false;
});
});
// menu class 추가
$(window).scroll(function(){
var scltop = $(window).scrollTop();
$.each($contents, function(idx, item){
var $target   = $contents.eq(idx),
i         = $target.index(),
targetTop = $target.offset().top;
if (targetTop <= scltop) {
$menu.removeClass('on');
$menu.eq(idx).addClass('on');
}
if (!(200 <= scltop)) {
$menu.removeClass('on');
}
})
});
// Go to the TOP
var btnTop = $('.btn-top');
btnTop.on('click','a', function(e){
e.preventDefault();
$doc.stop()
.animate({
scrollTop : 0
},800)
});
}(window, window.jQuery));