<!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基础知识查漏 二

    一.java基本数据类型所占的内存大小 在Java中一共有8种基本数据类型,其中有4种整型,2种浮点类型,1种用于表示Unicode编码的字符 单元的字符类型和1种用于表示真值的boolean类型.( ...

  2. CSS的两种盒模型

    盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...

  3. 九度OJ 1125：大整数的因子 （大数运算）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:974 解决:494 题目描述: 已知正整数k满足2<=k<=9,现给出长度最大为30位的十进制非负整数c,求所有能整除c的k. ...

  4. grouped differently across partitions

    [熵增] 由无序到有序 http://spark.apache.org/docs/latest/rdd-programming-guide.html#shuffle-operations Shuffl ...

  5. SpringBoot-(1)-IDEA创建SpringBoot项目并运行访问接口

    一,安装IDEA mac安装IDEA IDEA配置Tomcat 二,创建SpringBoot项目 1,打开IDEA,点击Create New Project 2,选择自己所安装的JDK.如果没有配置J ...

  6. APP上线审核注意事项

    基本要点 ·         不能导致手机故障(比如崩溃或屏幕问题) ·         长时间/过度使用之后反应仍然很快 ·         应用内的所有价格信息中不能用固定值代替可变变量 ·    ...

  7. linux apache服务器

    apache服务器 服务端功能是侦听和响应客户端的http请求.http协议的默认端口是80. 1996年以来,apache成为最流行的web服务器. IIS web服务器只能安装在windows上. ...

  8. React + webpack 环境配置

    安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码 ...

  9. async函数学习笔记

    含义 async函数是什么?一句话,它就是Generator函数的语法糖. const fs = require('fs') const readFile = function(fileName){ ...

  10. 人生苦短之Python类的一二三

    在Python中,类也是以class开头定义的.我们定义一个动物类,它有名字和年龄,在java变量有实例变量和局部变量,方法内的变量是局部变量,类里面的变量是实例变量.那么在Python中的类及其属性 ...