<!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. Java实现MD5加密解密类

    http://blog.csdn.net/m_changgong/article/details/4361526

  2. Android开发之onMeasure（int widthMeasureSpec, int heightMeasureSpec）方法

    onMeasure()函数由包含这个View的具体的ViewGroup调用,因此值也是由其ViewGroup中传入的.子类View的这两个参数widthMeasureSpec, heightMeasu ...

  3. iOS 开发中的一些注意点(安全、当前语言、时间格式化)

    1.重复运行项目,不重复构建项目(来自Heath Borders) 假如你一直在不停地调试同一个问题,你可以在不重复构建的情况下运行你的APP,这样:“Product>Perform Actio ...

  4. HTTP1.1学习笔记 -- RFC2616

    本人跟web无缘,从来没有想去学http,现在看来,学学也是有益无害,总会要用着点滴. RFC见这里: https://www.ietf.org/rfc/rfc2616.txt 0. URI格式 ht ...

  5. Android 6.0 如何默认打开user版本的root权限【转】

    本文转载自:http://blog.csdn.net/wangjicong_215/article/details/77601638 1.system/core/adb/Android.mkdiff ...

  6. js中const,var,let区别 今天第一次遇到const定义

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...

  7. BZOJ 1632 [Usaco2007 Feb]Lilypad Pond：spfa【同时更新：经过边的数量最小】【路径数量】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1632 题意: 有一个n*m的池塘.0代表水,1代表荷花,2代表岩石,3代表起点,4代表终点 ...

  8. Pyhton：汉诺塔游戏

    #汉诺塔游戏攻略! def hanoi(n,x,y,z): if n == 1: print(x,'-->',z) else: hanoi(n-1,x,z,y) #将前n-1个盘子从x移动到y上 ...

  9. 自己实现c++中string 类

    class String { public: String(const char *str = NULL);// 普通构造函数 String(const String &other);// 拷 ...

  10. c++之拷贝构造函数详解

    C++中经常使用一个常量或变量初始化另一个变量,例如: double x＝5.0: double y＝x; 使用类创建对象时,构造函数被自动调用以完成对象的初始化,那么能否象简单变量的初始化一样,直接 ...