<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            background: #ff0000;
            width:100%;
            height: 5000px;;
        }
        .top{
            width:50px;
            height:50px;
            position: fixed;
            right:20px;
            bottom:20px;
            background: #424242;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="test">
<div class="top">click me</div>
</div>
<script type="text/javascript">
    var clickBtn=document.getElementsByClassName("top")[0];
    var timer=null;
    clickBtn.addEventListener("click",function () {
       timer=setInterval(function(){
            scrollTopm=document.body.scrollTop;
            if(scrollTopm<=0){clearTimeout(timer);}
            else{               
 　　　　　　　　　　document.documentElement.scrollTop = document.body.scrollTop =scrollTopm/3;    //剩余距离的三分之一回到顶部       
　　　　　　 }  ,200});
　　}
</script>
</body></html>

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

  1. 详解原生JS回到顶部

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

  2. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  3. js回到顶部

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

  4. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  5. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  6. css+js回到顶部

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

  7. 原生JS返回顶部，带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  8. js回到顶部 动画速度 （自己记录）

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

  9. JS 回到顶部

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

随机推荐

  1. linux修改进程的名字

    1 修改linux进程名字的基本原理 linux进程以argv[0]作为进程的名字,因此只需要修改argv[0]处的字符串就修改了linux进程的名字. 2 直接修改argv[0]会导致的问题 如果名 ...

  2. TTimer源码研究

    TTimerProc = procedure of object; IFMXTimerService = interface(IInterface) ['{856E938B-FF7B-4E13-85D ...

  3. 区块链+AI将给区块链带来怎样的改变？

    区块链和人工智能技术都是互联网时代最新.最热的技术,不仅可以改变我们生活,还能产生巨大的财富,为此国家大力支持发展,科技巨头们也纷纷布局.那区块链与人工智能结合,对区块链技术而言会产生什么样的化学反应 ...

  4. 青岛理工ACM交流赛 J题 数格子算面积

    数格子算面积 Time Limit: 1000MS Memory limit: 262144K 题目描述 给你一个多边形(用’\’和’/’表示多边形的边),求多边形的面积. 输入  第一行两个正整数h ...

  5. scroll或是其子类被添加进view时，界面自动上移

    开发中经常会遇到ViewController添加scroll或是其子类被添加进controller.view时,scroll会自动下移大概64像素 解决: self.edgesForExtendedL ...

  6. MAC 安装phantomjs

    step1:下载压缩包http://phantomjs.org/ step2:解压缩,我是解压缩到/Users/gxy/software step3:写入配置路径,vi ~/.bash_profile ...

  7. Jmeter 施压 SQL server数据库的时候，如何设置？

    1. 在应用Jmeter进行施压之前,有个重要的端口需要手动查找出来.该端口在第三部要使用.开始——程序——microsoft SQL Server 2008R2——配置工具——SQL Server ...

  8. bzoj 3781 小B的询问——分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3781 非常经典的分块套路.于是时间空间比大家的莫队差了好多…… #include<io ...

  9. 快速沃尔什变换(FWT)学习笔记 + 洛谷P4717 [模板]

    FWT求解的是一类问题:\( a[i] = \sum\limits_{j\bigoplus k=i}^{} b[j]*c[k] \) 其中,\( \bigoplus \) 可以是 or,and,xor ...

  10. GC及其作用

    Java GC 是垃圾回收机制,自动内存管理和垃圾清扫机制,释放内存中的资源和垃圾