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

* { margin: 0; padding: 0; }
body { width: 1000px; margin: 0 auto;}
body { background: #fff;padding: 0; }
img { border: 0; }
ul, ol { list-style: none; }
.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;}

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

    $(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');
            }
        })

    });

    var btnTop = $('.btn-top');
    btnTop.on('click','a', function(e){
        e.preventDefault();
        $doc.stop()
                .animate({
                    scrollTop : 0
                },800)
    });

}(window, window.jQuery));