스크롤 메뉴(Scroll Menu) 구현해보기

Scroll Menu

주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다.

대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다.

Temp Mark-up

html

<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));

Complete Source

See the Pen Scroll menu(floating menu) by jaeheekim (@jaehee) on CodePen.

참고 소스

javascript

// float menu
(function ($) {
    $.scroll = {};
    $.scroll.move = function (scrollTarget, scrollValue, speed, callback) {
        $(scrollTarget).animate({
            "scrollTop": isNaN(scrollValue) ? $(scrollValue).position().top : scrollValue
        }, speed, callback);
    };

    $(function () {
        $('.btn-scroll').on("click", function (e) {
            e.preventDefault();
            $.scroll.move('html,body', $(this)[0].hash, 800);
        });
    });
}(window.jQuery));

Jaehee's WebClub