点击导航滚动条滚动到相应位置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
效果：