js 滚到页面顶部

Posted 2020-07-27 哈姆PP

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 滚到页面顶部相关的知识，希望对你有一定的参考价值。

一、滚到顶部，且滚动中，用户滚动鼠标无效

    <style>
        .div1, .div2, .div3, .div4 {
            height: 400px;
            width: 400px;
        }

        .div1 {
            background: #eea7cf;
        }

        .div2 {
            background: #a95ee1;
        }

        .div3 {
            background: #c57cad;
        }

        .div4 {
            background: #790d86;
        }

        .fixed-tool {            position: fixed;
            top: 50px;
            right: 0;
            display: none;
            /*border: 1px solid black;*/
        }

        .fixed-tool > a {
            display: block;
        }

        .go-top {
            background: #bb9cff;
            padding: 10px 1px;
        }

        .go-top-with-img {
            padding: 0;
            width: 40px;
            height: 40px;
            background: url(top_bg.png) no-repeat;
        }

        .go-top-with-img:hover {
            background-position: left -40px;
        }
    </style>
</head>
<body>
<h1 id="title1">标题1 </h1>

<div class="div1"></div>
<h1>标题2</h1>

<div class="div2"></div>
<h1>标题3</h1>

<div class="div3"></div>
<h1>标题4 </h1>

<div class="div4"></div>
<h1>标题5 </h1>

<div class="div1"></div>
<h1>标题6 </h1>

<div class="div3"></div>
<h1>标题7</h1>

<div class="div2"></div>
<h1>标题8 </h1>
<br/>

<div class="fixed-tool" id="fixedTool">
    <a href="#title1">标题1</a>
    <a href="javascript:;" class="go-top">顶部</a>
    <a href="javascript:;" class="go-top-with-img" id="goTop"></a>
</div>
<script>
    //"use strict";
    window.onload = function () {
        var oGoTopLink = document.getElementById("goTop");
        var iClientHeight = document.documentElement.clientHeight;
        var fixedTool = document.getElementById("fixedTool");
        var timer = null;

        window.onscroll = function () {
            //判断是否滚到了第二屏,是则显示，否则隐藏
            var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (sScrollTop >= iClientHeight) {
                fixedTool.style.display = "block";
            } else {
                fixedTool.style.display = "none";
            }
        };

        oGoTopLink.onclick = function () {
            timer = setInterval(function () {
                var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var iSpeed = Math.floor(-sScrollTop / 12);
                document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed;
                document.body.onmousewheel = function(){
                    return false;
                };
                if (sScrollTop <= 0) {
                    clearInterval(timer);
                    document.body.onmousewheel = function(){
                        return true;
                    };
                }
            }, 30);

        }
    };
</script>
</body>
</html>

封装此方法：

//封装以上方法：
    /**
     * @param {String} sWrapId :the element which wraped the go-to-top link
     * @param {String} sEleId :the go-to-top element
     * @param {Number} iSpeed : speed of scrolling ,smaller faster
     * @returns {undefined}
     * usage: goTop("fixedTool", "goTop", 12); 关于样式：可以自己写，如果想用默认样式，就用我上述例子的那些class name,
     */
    function goTop(sWrapId, sEleId, iSpeed){
        var oGoTopLink = document.getElementById(sEleId);
        var iClientHeight = document.documentElement.clientHeight;
        var wrapBox = document.getElementById(sWrapId);
        var timer = null;

        window.onscroll = function () {
            //判断是否滚到了第二屏,是则显示，否则隐藏
            var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (sScrollTop >= iClientHeight) {
                wrapBox.style.display = "block";
            } else {
                wrapBox.style.display = "none";
            }
        };

        oGoTopLink.onclick = function () {
            timer = setInterval(function () {
                var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var iScrollSpeed = Math.floor(-sScrollTop / iSpeed);
                document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iScrollSpeed;
                document.body.onmousewheel = function(){
                    return false;
                };
                if (sScrollTop <= 0) {
                    clearInterval(timer);
                    document.body.onmousewheel = function(){
                        return true;
                    };
                }
            }, 30);
        };
        return undefined;
    }

二，滚到顶部，且滚动中，若用户滚动鼠标，则停止滚到顶部动作

<script>
    //"use strict";
    window.onload = function () {
        var oGoTopLink = document.getElementById("goTop");
        var iClientHeight = document.documentElement.clientHeight;
        var fixedTool = document.getElementById("fixedTool");
        var bIsTop = true;
        var timer = null;

        //当正在滚回顶部的动作中，用户滚动滚轮的话，停止滚回顶部的动作
        window.onscroll = function () {
            //判断是否滚到了第二屏,是则显示，否则隐藏
            var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (sScrollTop >= iClientHeight) {
                fixedTool.style.display = "block";
            } else {
                fixedTool.style.display = "none";
            }
            if (!bIsTop) {
                clearInterval(timer);
            }
            bIsTop = false;
        };

        oGoTopLink.onclick = function () {
            timer = setInterval(function () {
                var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var iSpeed = Math.floor(-sScrollTop / 12);
                document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed;
                bIsTop = true;
                if (sScrollTop <= 0) {
                    clearInterval(timer);
            }, 30);
        }
    };
</script>

以上是关于js 滚到页面顶部的主要内容，如果未能解决你的问题，请参考以下文章

完美平滑实现一个“回到顶部”

小程序各种功能代码片段整理---持续更新

JS实现滚动条滚到页面距离底部300px时执行事件的方法

JS实现判断滚动条滚到页面底部并执行事件的方法

BootStrap有用代码片段（持续总结）

几条jQuery代码片段助力Web开发效率提升