<!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. 九度OJ 1143：Primary Arithmetic（初等数学） （进位）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:616 解决:254 题目描述: Children are taught to add multi-digit numbers from ri ...

  2. linux 网络设备，网卡配置 ,相关

    网络设备,网卡配置: Eth0是物理网卡:唯一mac地址,Bcast:广播地址,MAsk:子网掩码, Lo:系统自带的回环的ip地址,可以做一些基本的测试应用,比如没有网卡就用127.0.0.1, r ...

  3. 编写按键驱动以及在framework层上报按键事件

    平台信息:内核:linux3.10 系统:android6.0平台:RK3288 前言:本文主要实现的功能是在android系统中添加一个按键,在驱动层使用定时器,每隔1秒钟向上层发送按键实现,fra ...

  4. SDUT OJ 进制转换

    进制转换 Time Limit: 1000MS Memory limit: 65536K 题目描述 输入一个十进制数N,将它转换成R进制数输出. 输入 输入数据包含多个测试实例,每个测试实例包含两个整 ...

  5. java多线程-多线程常识

    线程和进程的区别是什么?进程是一个正在运行的软件程序,打开资源管理器可以看到好多正在运行的进程,而线程则是程序中的顺序控制流,只能使用分配给程序的资源和环境.一个进程至少存在一个线程(主线程). 在j ...

  6. Java8初体验（1）：lambda表达式语法

    原文出处: 一冰_天锦 本文主要记录自己学习Java8的历程,方便大家一起探讨和自己的备忘.因为本人也是刚刚开始学习Java8,所以文中肯定有错误和理解偏差的地方,希望大家帮忙指出,我会持续修改和优化 ...

  7. oracle添加表注释和表字段注释

    创建Oracle数据库表时加上注释 CREATE TABLE t1( id  varchar2(32) primary key,name VARCHAR2(8) NOT NULL, age numbe ...

  8. ffplay 一些好玩的filter

    添加字幕:ffplay -vf drawtext="fontfile=arial.ttf: text='Test Text': x=100: y=300: \ fontsize=48: fo ...

  9. 搜索算法 pots

    题目链接  点击打开链接 Pots Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Su ...

  10. python操作oracle数据库

    本文主要介绍python对oracle数据库的操作学习 包含:oracle数据库在Windows操作系统下的安装和配置.python需要安装的第三方拓展包以及基本操作的样例学习. 1          ...