<!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. sqlserver for xml

    FOR XML子句有四种最基本的模式 1.AUTO模式:返回数据表为起表名的元素,每一列的值返回为属性:2.RAW模式:返回数据行为元素,每一列的值作为元素的属性: 3.PATH模式:通过简单的XPa ...

  2. golang怎么使用redis，最基础的有效的方法

    最近在学GO语言,我自己也喜欢使用redis,于是乎就顺便把go操作redis的方法也给学了,有个第三方包,在GitHub上面找的 go get github.com/alphazero/Go-Red ...

  3. TCP端口状态说明ESTABLISHED、TIME_WAIT、 CLOSE_WAIT

    一. 首先说下tcp端口的几种状态: 1.LISTENING状态 FTP服务启动后首先处于侦听(LISTENING)状态. 2.ESTABLISHED状态 ESTABLISHED的意思是建立连接.表示 ...

  4. c# ftp 上传文件 与 下载文件

    接着上一篇说. 上一篇说了根据配置文件获取路径,并判断路径在服务器中是否存在.如果不存在则在服务器中建立一个. 然后就是往路径下面传输文件了.. 代码: //连接ftp private void Co ...

  5. 修改字符集AL32UTF8修改为ZHS16GBK详解

    登陆sqlplus,在命令行输入 sqlplus sys/sys as sysdba;//登陆sqlplus SQL>SHUTDOWN IMMEDIATE; SQL>STARTUP MOU ...

  6. Python String模块详解

    >>> import string >>> string.ascii_letters 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKL ...

  7. js运算浮点数

    在js中做小数:9.3+0.3会发现,得到的结果并不是9.6,而是9.600000000000001.这是为什么? Javascript采用了IEEE-745浮点数表示法,这是一种二进制表示法,可以精 ...

  8. CentOS 7 更换 阿里云/清华大学 yum 软件源

    阿里云参考:https://opsx.alibaba.com/mirror?lang=zh-CN 清华参考:https://mirrors.tuna.tsinghua.edu.cn/help/cent ...

  9. Oracle 用户

    1.关于创建用户; 2.用户配置文件; 3.创建用户; 4.更改用户; 5.删除用户; 1.关于创建用户: 1.1 用户名:创建数据库用户必须具有 Create user 系统权限,必须指定用户名和密 ...

  10. mac安装mysql及终端操作mysql与pycharm的数据库可视化

    一.Mac安装mysql 首先下载mysql,地址:https://dev.mysql.com/downloads/mysql/ 然后已知安装就好了,会出现让你记住密码的提示,然后就安装好了.... ...