zoukankan html css js c++ java

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>

查看全文

相关阅读:
PAT T1001 Battle Over Cities-Hard Version
PAT甲级2019冬季考试题解
 L3-016 二叉搜索树的结构
 PAT A1135 Is It A Red Black Tree
PAT A1114 Family Property
PAT A1034 Head Of Gang
PAT A1151 LCA in Binary Tree
什么是一揽子交易
 子公司自购买日（或合并日）开始持续计算的可辨认净资产（对母公司的价值）与购买日子公司可辨认净资产的公允价值有什么区别
 借少数股东权益，贷少数股东损益

原文地址：https://www.cnblogs.com/hamsterPP/p/5598508.html