锚点滚动

作者: 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