<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <title>Document</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    .public_gotop {

        background-color: #858585;

        position: fixed;

        right: 2rem;

        bottom: 6rem;

        width: 3rem;

        height: 3rem;

        border-radius: 50%;

        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABN0lEQVRYhe3Uuy4FURjFcZEjiMu76FwLiWuLhJJ4FU+gFwqNa1SuHQmtzhNoJRxB3H4Kc+LLGJdzDI1Z3cxe3/qvvfdk6uoKFSpUqEahFetYRtNfw9tx4k2HaPkreBuOvdcBmn8b3pyAKrrCTXjeQsNvwVtxFGAX6EAPyuH9bu7fRMbOL9EZ1ntTJbbRmBe8CfupY+/K8A2krmPzx9eRwPdS8O5P/IO4Df4NlGqFN2InhJXR+425oVSJtapLJPDtEHKNvirmR3AX5le+XQINydFVdIOBqnbwmjOaKrGE+q+GSl5/rxXdYqhaeMgbw33IW/ywRAJfTcGHa4WH3HE8hNyFzBKYD6YHTPwUHrKn8RTy57JM58niIybzgof8WTwnjLMsQz9OMZU3PDBmEkbn1+5ChQr9F70Ae6lHrD/JbEkAAAAASUVORK5CYII=);

        background-repeat: no-repeat;

        background-position: center;

        background-size: 60%;

        display: none;

    }

    </style>

</head>

<body>

    <div style="height: 500px; background: #E1A0F3"></div>

    <div style="height: 500px; background: #CE77B5"></div>

    <div class="public_gotop" id="gotop"></div>

    <script type="text/javascript">

    window.onload = function() {

        // 返回顶部

        var goTopEx = function() {

            var gtObj = document.getElementById("gotop");

            function getScrollTop() {

                return document.documentElement.scrollTop || document.body.scrollTop;

            }

            function setScrollTop(value) {

                document.documentElement.scrollTop = value;

                document.body.scrollTop = value;

            }

            window.onscroll = function() {

                getScrollTop() > 80 ? gtObj.style.display = "block" : gtObj.style.display = "none";

            }

            gtObj.onclick = function() {

                var goTop = setInterval(scrollMove, 10);

                function scrollMove() {

                    setScrollTop(getScrollTop() / 1.1);

                    if (getScrollTop() < 1) clearInterval(goTop);

                }

            }

        }()

    }

    </script>

</body>

</html>

效果如图：

备注解释：
function goTopEx() { //函数名goToEx

    var obj = document.getElementById("goTopBtn"); //获取id为goTopBtn的元素

    function getScrollTop() { //函数名为getScrollTop

        return document.documentElement.scrollTop; //返回document.documentElement(html)的滚动条的高度

    }

    function setScrollTop(value) { //函数名为setScrollTop,形参为value

        document.documentElement.scrollTop = value; //设置document.documentElement(html)的滚动条的高度为value

    }

    window.onscroll = function() { getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none"; }; //当移动鼠标的时候,如果document.documentElement(html)的滚动条的高度>0,则obj显示,否则隐藏掉

    obj.onclick = function() { //点击obj

        var goTop = setInterval(scrollMove, 10); //每隔10毫秒发生scroolMove方法

        function scrollMove() { //函数名为scrollMove

            setScrollTop(getScrollTop() / 1.1); //设置document.documentElement(html)的滚动条的高度为getScrollTop()/1.1

            if (getScrollTop() < 1) clearInterval(goTop); //如果得到document.documentElement(html)的滚动条的高度<1,则清除掉scroolMove方法

        }

    };

}

原生态js回顶部的更多相关文章

  1. js回网页顶部

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  4. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  5. 本站页脚HTML回顶部代码

    <style type="text/css">.top { width: 50px; height: 50px; background-color: #F0F0F0; ...

  6. 原生态js，返回至顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  8. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  9. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 解剖Nginx·自动脚本篇（2）设置初始变量脚本 auto/init

    在configure中运行完auto/options脚本后,接着运行auto/init脚本,其中所做的工作如下. 1 Makefile文件名变量 默认情况下是: objs/Makefile 代码如下: ...

  2. 修改 cmd 控制台字体、巧用 FontLink 使中英文独立设置

    众所周知,Windows 中 cmd 控制台窗口的字体难看,但是修改注册表是可以实现修改其字体的,但很多很棒的编程字体是没有中文的,所以在显示中文时直接调用了宋体,这绝妙的反差实在是 不忍直视.但是, ...

  3. CENTOS 配置好SVN服务环境后，其他服务器无法访问 Error: Can't connect to host '192.168.1.103': 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。

    CENTOS 配置好SVN服务环境后,其他服务器无法访问   根据 下面的步骤配置好服务后,使用本机可以正常 连接到 SVN 服务, 但是使用局域网的其他服务器访问时出现下面的错误, Error: C ...

  4. windows下怎么安装protobuf for python

    首先从google上下载protobuf-3.0.0.zip和protoc-3.0.0-win32.zip,然后把protoc-3.0.0-win32.zip里的protoc.exe放到protobu ...

  5. BOOST_TYPEOF和BOOST_AUTO

    1.简介 头文件<boost/typeof.hpp>里定义了两个宏:BOOST_TYPEOF和BOOST_AUTO,分别用于仿真C++新标准的typeof和auto关键字,可以在编译期自动 ...

  6. code1052 地鼠游戏

    贪心算法,从后往前 来自codevs的题解: 我的纠结思考过程:如果每一秒都没有重复的地鼠出现 那么肯定是一个一个挨着打如果有重复的地鼠 那么要考虑打那个更优 当然是选分值最大的 单纯这样想很合理 但 ...

  7. openpose 问题

    I ran into the above issue causing a core dump after compiling what I believe was successful without ...

  8. RTC实时时钟-备份区域BKP--原理讲解

    RTC(Real Time Clock):实时时钟 BCD码:用4位2进制来表示10以内的十进制的形式. RTC的时钟源:LSE(32.768KHZ).HSE_RTC.LSI.经过一个精密校准(RTC ...

  9. zigbee初探

    什么是zigbee? 1.它是一种通信方式,一种通信协议: 2.其作用就是构建一个类似无线局域网的东西:如果这个局域网用于传感器的数据收集.监控,那么这个网络就叫做无线传感器网络. 应用领域:家居.工 ...

  10. CTE递归限制次数

    CTE可以用来取递归,网上资料很多,这里就不再叙述了,今天遇到的需求是要限制只取2级,然后加了个临时的lev with tree as(select [CustomerID],[CustomerNam ...