JQuery点击锚点滚动到相应的模块

<div id="loutinav" style="display: none;">
    <ul>
        <li class="active"><span>帅哥区</span> </li>
        <li><span>女神区</span> </li>
        <li><span>萌妹区</span> </li>
        <li><span>男神区</span> </li>
        <li><span>暖男区</span> </li>
        <li><span>靓仔区</span> </li>
        <li><span>未知区</span> </li>
        <li><span>红番区</span> </li>
        <li><span>还没看够</span> </li>
        <li class="last">顶部</li>
    </ul>
</div>
<!--楼层内容开始-->
<div id="header">
    向下滚动鼠标查看效果
</div>
<div id="main">
    <div class="louti" style="border:1px solid #cc0033;">
        帅哥区
    </div>
    <div class="louti" style="border:1px solid #999933;">
        女神区
    </div>
    <div class="louti" style="border:1px solid #ccff33;">
        萌妹区
    </div>
    <div class="louti" style="border:1px solid #006633;">
        男神区
    </div>
    <div class="louti" style="border:1px solid #6666cc;">
        暖男区
    </div>
    <div class="louti" style="border:1px solid #ff6600;">
        靓仔区
    </div>
    <div class="louti" style="border:1px solid #ffff00;">
        未知区
    </div>
    <div class="louti" style="border:1px solid #3333ff;">
        红番区
    </div>
    <div class="louti" style="border:1px solid #ff00cc;">
        还没看够
    </div>
</div>
<div id="footer">
    页面底部
</div>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: 'microsoft yahei';
    }
    #loutinav {
        width: 35px;
        position: fixed;
        top: 100px;
        left: 50px;
        border: 1px solid #ddd;
        display: none;
    }
    #loutinav ul li {
        width: 35px;
        height: 32px;
        border-bottom: 1px dotted #DDDDDD;
        list-style: none;
        font-size: 12px;
        text-align: center;
        position: relative;
        cursor: pointer;
        padding: 10px 0;
        background-color: #000000;
        color: #fff;
    }
    #loutinav ul li span {
        width: 35px;
        height: 32px;
        padding: 10px 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    #loutinav ul li.last {
        background: #5e4a4a;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    #loutinav ul li.active span {
        background-color: #2dbe60;
        color: #fff;
        display: block;
    }
    #loutinav ul li:hover span {
        background-color: #2dbe60;
        color: #fff;
        display: block;
    }
    #header {
        width: 1000px;
        height: 1000px;
        border:5px solid #cc6633;
        margin: 0 auto;
        font-size: 50px;
	line-height: 1000px;
	text-align: center;
        color: #000;
    }
    #main {
        width: 1000px;
        margin: 0 auto;
    }
    #main .louti {
        height: 600px;
        width: 1000px;
        font-size: 50px;
        color: #000;
        font-weight: bold;
        text-align: center;
        line-height: 600px;
    }
    #footer {
        width: 1000px;
        height: 400px;
        border: 5px solid #000;
        margin: 0 auto;
        font-size: 50px;
	line-height: 400px;
	text-align: center;
        color: #000;
    }
</style>
JQuery：
<script>
    $(function(){
        $(window).on('scroll',function(){
            var $scroll = $(this).scrollTop();
            if ($scroll>= 800){
                $("#loutinav").show();
            }else{
                $("#loutinav").hide();
            }
            $('.louti').each(function(){
                var $loutitop = $('.louti').eq($(this).index()).offset().top;
                if($loutitop > $scroll){
                    $('#loutinav li').removeClass('active');
                    $('#loutinav li').eq($(this).index()).addClass('active');
                    return false;
                }
            })
        });
        var $loutili = $('#loutinav li').not('.last');
        $loutili.on('click',function(){
            $(this).addClass('active').siblings('li').removeClass('active');
            var $loutitop = $('.louti').eq($(this).index()).offset().top;
            $('html,body').animate({
                scrollTop:$loutitop
            });
        });
        $('.last').on('click',function(){
            $('html,body').animate({
		//$('html,body')兼容问题body属于chrome
            scrollTop:0
            })
        })
    })
</script>