<!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. 对excel进行封装

    package com.huawei.utils; import java.io.FileNotFoundException;import java.io.FileOutputStream;impor ...

  2. web前端整套面试题(二)--今日头条面试题

    12道单选,7道不定项选择,2道编程题 一.单选(12题) 1.[单选题]在HTML中,( )可以在网页上通过链接直接打开邮件客户端发送邮件. A.<a href=”telnet:ming.zh ...

  3. poi解析excle文件（xls，xlsx）

    解析xls文件 /** * 解析xls文件 * * @param path 文件路径 * @throws Exception */ public static void showXls(String ...

  4. 二维码生成插件qrious及网站扫码登录的一些理解

    什么是二维码 ​ 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型. ...

  5. 一道面试题Lintcode196-Find the Missing Number

    http://www.lintcode.com/en/problem/find-the-missing-number/# Find the Missing Number Given an array ...

  6. 【BZOJ 3261】最大异或和【可持久化字典树】

    题意 给出一个长度为n的整数序列,给出m个操作.操作有两种.1,Ax表示在序列结尾增加x.2,Qlrx表示找到一个位置p满足 l<=p<=r,使得a[p] xor a[p+1]xor... ...

  7. python中函数作用域

    在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = 'sthu' print('在change_name里的name:' ...

  8. SpringBoot Actuator & SpringBoot Admin

    SpringBoot Actuator提供了很多监控和管理你的spring boot应用的HTTP或者JMX端点,并且你可以有选择地开启和关闭部分功能. 当你的spring boot应用中引入依赖之后 ...

  9. 276. Paint Fence篱笆涂色

    ［抄题］: There is a fence with n posts, each post can be painted with one of the k colors. You have to ...

  10. yum基本用法与修改源

    一.yum简介 yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(y ...