zoukankan      html  css  js  c++  java
  • 原生JS回去顶部

    直接上代码

        window.addEventListener("load", function() {
            var btn = document.getElementById('GO');
            btn.addEventListener("mouseover", moveIn, false);
            btn.addEventListener("mouseout", moveOut, false);
    
            function moveIn() {
                btn.style.color = "#ffffff"; //修改的是内联样式,具有最高的优先级;
                btn.style.textIndent = "0em";
                btn.style.backgroundImage = "none";
                btn.style.backgroundColor = "#FF4401";
            }
    
            function moveOut() {
                btn.style.textIndent = "-9999em";
                btn.style.backgroundImage = "url(icons.png)";
            }
    
            function goTop(acceleration, time) { //修改参数可调整返回顶部的速度
                acceleration = acceleration || 0.1;
                time = time || 10;
                var speed = 1 + acceleration;
    
                function getScrollTop() { //取得滚动条的竖直距离
                    return document.documentElement.scrollTop || document.body.scrollTop;
                }
    
                function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
                    document.documentElement.scrollTop = value;
                    document.body.scrollTop = value;
                }
                window.onscroll = function() {
                    var scrollTop = getScrollTop();
                    if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来,这里是100px
                        btn.style.display = "block";
                    } else {
                        btn.style.display = "none";
                    }
                };
                btn.onclick = function() {
                    var timer = setInterval(function() {
                        setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离
                        if (getScrollTop() == 0)
                            clearInterval(timer);
                    }, time);
                };
            }
            goTop(0.2, 8);
        }, false);
  • 相关阅读:
    控制测试与实质性程序的关系
    【2020-02-23】一个生活视角的触发
    工作,拼的都是脏和累
    【2020-02-22】让偶然不再偶然
    【2020-02-21】当心自己的想象力
    【2020-02-20】想清楚,自己在为谁服务
    静态化与伪静态化的区别
    e3商城_day04
    e3商城_day03
    服务器,操作系统,虚拟机,虚拟主机,IP地址
  • 原文地址:https://www.cnblogs.com/hasubasora/p/6677221.html
Copyright © 2011-2022 走看看