<!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. 我在开发第一个Swift App过程中学到的四件事

    本文转载至 http://www.itjhwd.com/wzkfyigeswiftsjs/ 译者注:本文作者Greg Heo,这是他为讲授iOS 8 App Extensions视频教程而实际使用Sw ...

  2. EasyDarwin流媒体服务器实现关键帧推送功能

    -本篇由团队成员Fantasy供稿! 功能背景 随着社会进步,人们对产品体验要求越来越高.EasyDarwin也不例外.为了能满足用户对链接服 后看到画面时间(也就是我们经常看到的起播时间)短的要求, ...

  3. 哈希表的java实现

    一.为什么要用哈希表 树的操作通常需要O(N)的时间级,而哈希表中无论存有多少数据,它的插入和查找(有时包括删除)只需要接近常量级的时间,即O(1)的时间级. 但是哈希表也有一定的缺点:它是基于数组的 ...

  4. Android笔记之获取显示器宽高

    原先的Display.getWidth().Display.getHeight()已废弃 推荐的获取Display宽高的方法如下 DisplayMetrics metrics = new Displa ...

  5. 对ShortCut和TWMKey的研究

    TWMKey = packed record Msg: Cardinal; CharCode: Word; Unused: Word; KeyData: Longint; Result: Longin ...

  6. 局域网如何通过SSH连接虚拟机装的centOS系统

    首先,在一个局域网内的一台机器上装了虚拟机,虚拟机上装了centos系统: 但是,只有本机能连接centos,其他电脑都连不上: ping了一下发现不通,然后排查原因. 我发现局域网内的机器IP都是: ...

  7. [NOIP2011提高组day2]-3-观光公交

    3．观光公交 (bus.cpp/c/pas) [问题描述] 风景迷人的小城 Y 市,拥有 n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光 ...

  8. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  9. Appium——adb 启动问题Invalid argument: cannot open transport registration socketpair could not read ok from ADB Server failed to start daemon * error: cannot connect to daemon

    adb启动问题:Invalid argument: cannot open transport registration socketpair could not read ok from ADB S ...

  10. 纯属娱乐,对入门Android有一定的帮助

    package android.m9;   import android.app.Activity; import android.os.Bundle; import android.view.Men ...