<!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. [KVM][guestfs] 安装 guestfs-python 出错

    pip install http://download.libguestfs.org/python/guestfs-1.36.13.tar.gz 执行后出错: 然后百度.谷歌,都是说安装 gcc 或者 ...

  2. 通过args数组获取数据

    ----------siwuxie095                     通过 main 方法的 args数组 可以从控制台获取一组字符串数据     如:     package com.s ...

  3. HP发送HTTP POST请求 返回结果

    HP发送HTTP POST请求 返回结果 <?php $srv_ip = '192.168.10.188';//你的目标服务地址或频道.$srv_port = 80;$url = '/demo/ ...

  4. shiro 集成spring 配置 学习记录（一）

    首先当然是项目中需要增加shiro的架包依赖: <!-- shiro --> <dependency> <groupId>org.apache.shiro</ ...

  5. Android代码速查，写给新手的朋友们[转]

    原文地址:http://www.open-open.com/lib/view/open1397286499090.html 0 android 创建按钮 Button button = new But ...

  6. 633E Binary Table

    传送门 分析 我们发现n特别小,所以可以从这里入手 我们记录出所有列中某一种状态的列有多少个 我们再记录出每种列最少有多少个1(原来的1的个数和取反后的个数去最小值) 于是我们可以得出对于所有列异或一 ...

  7. Charles 4.2.5 破解原理.RP

    请支持正版,仅供技术交流. 写了个小工具方便在线处理,在线破解 https://github.com/8enet/Charles-Crack 2018/4/8 Charles 4.2.5 替换类名和方 ...

  8. datatable：dt.page(dt.page()).draw(false)

    dt.page(dt.page()).draw(false);该方法可以直接返回到当前页,不用重新绘制table 描述 分页是DataTables的一个核心功能,并且该方法提供对表格显示页面的外部控制 ...

  9. React相关知识和经验的碎片化记录

    React相关知识和经验的碎片化记录 1.Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a chil ...

  10. 从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)

    1:正则的概念 正则表达式(regular expression)是一个描述字符规则的对象.可以用来检查一个字符串是否含有某个子字符串,将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等 ...