点击导航滚动条滚动到相应位置jQuery与js方法

代码块

    /* CSS */
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        body {font-size: 12px;line-height: 1.7;}
        li {list-style: none;}
        #content {width: 100%;padding: 20px;}
        #content h1 {color: #0088bb;}
        #content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;height:800px;width: 100%;}
        #content .item h2 {font-size: 16px;font-weight: bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}
        #content .item li {display: inline;margin-right: 10px;}
        #content .item li a img {width: 230px;height: 230px;border: none;}

        #menu{position:fixed;right:0;top:200px;border:1px solid #0088bb;background-color: #fff;}
        #menu ul li a {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;}　
    </style>

    <!-- HTML -->
    <div id="menu">
        <ul class="ul_menu">
            <li><a flag="item1" href="#" class="current">1F </a></li>
            <li><a flag="item2" href="#">2F </a></li>
            <li><a flag="item3"  href="#">3F </a></li>
            <li><a flag="item4" href="#">4F </a></li>
            <li><a flag="item5" href="#">5F </a></li>
        </ul>
    </div>
    <div id="content">
        <h1>测试</h1>

        <div id="item1" class="item">
            <h2>1F </h2>
            <ul> <li><a href="#"><img src="" alt=""/></a></li> </ul>
        </div>
        <div id="item2" class="item">
            <h2>2F </h2>
            <ul> <li><a href="#"><img src="" alt=""/></a></li> </ul>
        </div>
        <div id="item3" class="item">
            <h2>3F </h2>
            <ul> <li><a href="#"><img src="" alt=""/></a></li> </ul>
        </div>
        <div id="item4" class="item">
            <h2>4F </h2>
            <ul> <li><a href="#"><img src="" alt=""/></a></li> </ul>
        </div>
        <div id="item5" class="item">
            <h2>5F </h2>
            <ul> <li><a href="#"><img src="" alt=""/></a></li> </ul>
        </div>
    </div>

jquery/js方法取其一

若使用jquery要引入jquery.js文件

    <script>
        $(function(){
            $(window).scroll(function(){
                var scrollTop = $(document).scrollTop();
                var oItem = $("#content").find(".item");
                var oName = "";
                $.each(oItem,function(){
                    var oneItem = $(this);
                    var offsetTop = oneItem.offset().top;
                    if(offsetTop-scrollTop < 200){
                        oName = oneItem.attr("id");
                    }
                });
                if(oName != $(".current").attr("href")){
                    $(".current").removeClass("current");
                    $(".ul_menu").find("[flag="+ oName +"]").addClass("current");
                }
            });

            $(".ul_menu li a").click(function(){
                var oA = $(this);
                var index = oA.parent().index();
                var h = $(".item").eq(index).offset().top + 'px';
                if(oA.attr("class") != "current"){
                    $('html,body').animate({scrollTop:h},300);
                }
            });
        });
    </script>

或者纯javascript不需要引入jquery.js

    <script>
        var timer = null;

        var oItem = getClassname("item");
        var oUl = getClassname("ul_menu")[0];
        var oA = oUl.getElementsByTagName("a");
        var oTop = [];
        for (var i = 0; i < oItem.length; i++) {
            oTop[oTop.length] = oItem[i].offsetTop;
        }

        window.onscroll = function(){
            var oName;
            var scrollTop = getScrollTop();
            for (var i = 0; i < oTop.length; i++) {
                if(oTop[i]-scrollTop<200){ 
                    oName = "item"+ (i+1);
                }
            }
            var oCur = getClassname("current")[0];
            if(oName != oCur.getAttribute("flag")){
                removeClass(oCur,"current");
                for (var i = 0; i < oA.length; i++) {
                    if(oA[i].getAttribute("flag") == oName){
                        addClass(oA[i],"current");
                    }
                }
            }
        }

        window.onload = function(){
            for (var i = 0; i < oA.length; i++) {
                oA[i].index = i;
                oA[i].onclick = function(){
                    if(!hasClass(this,"current")){
                        var oCur = getClassname("current")[0];
                        removeClass(oCur,"current");
                        addClass(oA[this.index],"current");
                        move(oA[this.index],oTop[this.index]);
                    }
                }
            }
        }

        // 滚动条运动
        function move(obj,iTarget){

            var iSpeed = 0;     //速度
            var iCur = 0;       //当前值

            clearInterval(timer);
            timer = setInterval(function(){
                var onOff = true;       //关闭定时器开关

                iCur = parseInt(getScrollTop());        //获取滚动条值当前值
                if(iCur > iTarget){
                    iSpeed = Math.floor((iTarget - iCur)/4);
                }else{
                    iSpeed = Math.ceil((iTarget - iCur)/4);
                }

                if(iCur != iTarget){
                    onOff = false;
                }else{
                    onOff = true;
                }

                //运动
                var tt = iCur + iSpeed;
                window.scrollTo(tt,tt);
                if(onOff){
                    clearInterval(timer);
                }

            },30);
        }

        // 获取滚动条距离顶部距离
        function getScrollTop(){
            return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        }

        // 获取含有classname的节点
        function getClassname(classnames){
            var oDiv;
            var oBj = [];
            if(document.getElementsByClassName){
                oBj = document.getElementsByClassName(classnames);
            }else{
                oDiv = document.getElementsByTagName("*");
                var oLen = oDiv.length;
                var oClass;
                for (var i = 0; i < oLen; i++) {
                    oClass = oDiv[i].className;
                    if(oClass.indexOf(classnames) != -1){
                        oBj[oBj.length] = oDiv[i];
                    }
                }
            }
            return oBj;
        }

        //判断某个节点是否含有class
        function hasClass(elements,cName){  
            return !!elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
        }

        // 添加class
        function addClass(elements,cName){
            if( !hasClass( elements,cName ) ){ 
                elements.className += " " + cName; 
            };
        }

        // 移除class
        function removeClass(elements,cName){
            if( hasClass( elements,cName ) ){ 
                // replace方法是替换 
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
            }
        }

    </script>

完整案例https://pan.baidu.com/s/1dFDLwdV
效果：