锚点滚动

作者: 5df463a52098 | 来源:发表于2018-04-09 11:17 被阅读70次
 window.onload = function(){
            scrollToAnchor();
        };

        // 监听地址栏url的hash值改变时,检查是否需要定位锚点
        window.onhashchange = function(){
            scrollToAnchor();
        };
        function scrollToAnchor(){
            var hash = getHash(), // 获取url的hash值
                anchor = getAnchor(hash), // 获取伪锚点对应的真锚点值
                anchorDom, // 伪锚点dom对象
                anchorScrollTop; // 伪锚点距离页面顶部的距离
            // 如果不存在伪锚点,则直接结束
            if(anchor.length < 1){
                return;
            }
            anchorDom = getDom(anchor); // 获取需要滚动内容的id
            anchorScrollTop = anchorDom.offsetTop; //距离顶部的距离
            animationToAnchor(document.body.scrollTop, anchorScrollTop);
        }
        function animationToAnchor(startNum, stopNum){
           var nowNum = startNum + 100; // 步进为10
            if(nowNum > stopNum){
                nowNum = stopNum;
            }
            // 缓动方法
            window.requestAnimationFrame(function(){
               if(document.documentElement && document.documentElement.scrollTop) {
                    document.scrollingElement.scrollTop = nowNum;
                } else if(document.body) {
                    document.body.scrollTop = nowNum;
                }
                // 滚动到预定位置则结束
                if(nowNum == stopNum){
                    return;
                }
                animationToAnchor(nowNum, stopNum); // 只要还符合缓动条件,则递归调用
            });
        }

        // 获取锚点id
        function getAnchor(str){
            return checkAnchor(str) ? str.split("w_")[1] : "";
        }
        // 判断是否为特殊的hash值,也即是否为伪锚点
        function checkAnchor(str){
            return str.indexOf("w_") == 0 ? true : false;
        }
        // 获取hash值
        function getHash(){
            return window.location.hash.substring(1);
        }
        // 获取dom对象
        function getDom(id){
            return document.getElementById(id);
        }

加入了jquery的animatin方法

 window.onload = function(){
            scrollToAnchor();
        };

        // 监听地址栏url的hash值改变时,检查是否需要定位锚点
        window.onhashchange = function(){
            scrollToAnchor();
        };
        function scrollToAnchor(){
            var hash = getHash(), // 获取url的hash值
                anchor = getAnchor(hash), // 获取伪锚点对应的真锚点值
                anchorDom, // 伪锚点dom对象
                anchorScrollTop; // 伪锚点距离页面顶部的距离
            // 如果不存在伪锚点,则直接结束
            if(anchor.length < 1){
                return;
            }
            anchorDom = getDom(anchor); // 获取需要滚动内容的id
            anchorScrollTop = anchorDom.offsetTop; //距离顶部的距离
            animationToAnchor(document.body.scrollTop, anchorScrollTop);
        }
        function animationToAnchor(startNum, stopNum){
              // 锚点id距离顶部一定距离(这里是距离顶部90px)
             $("html,body").animate({scrollTop: (stopNum-90) + "px"}, 1000);
        }

        // 获取锚点id
        function getAnchor(str){
            return checkAnchor(str) ? str.split("w_")[1] : "";
        }
        // 判断是否为特殊的hash值,也即是否为伪锚点
        function checkAnchor(str){
            return str.indexOf("w_") == 0 ? true : false;
        }
        // 获取hash值
        function getHash(){
            return window.location.hash.substring(1);
        }
        // 获取dom对象
        function getDom(id){
            return document.getElementById(id);
        }

相关文章

网友评论

    本文标题:锚点滚动

    本文链接:https://www.haomeiwen.com/subject/aagbhftx.html