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

HTML代码:

?
1
2
3
4
5
<div class="container">
    <p>你好哇</p>
    ...
</div>
<div id="top">回到顶部</div>

CSS代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container{
    border: 1px solid black;
}
#top{  
    position: fixed;
    padding: 10px;
    width: 20px;
    border: 1px solid black;
    box-shadow: 0 0 2px #333;
    right: 20px;
    bottom: 20px;
}
#top:hover{
    cursor: pointer;
}

JS代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//创建变量
var scroll_Top = document.getElementById('top');
  
//用最常用的scrollTop属性实现
var timer = null;
function scrollTop(){
    // 取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求.
    cancelAnimationFrame(timer);
    /* requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,
    在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
    一般来说,这个频率为每秒60帧。 */
    timer = requestAnimationFrame(function sTop(){
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        if(top > 0){
      //使用定时器,将scrollTop的值每次减少20(自行设置),直到减少到0,则滚动完毕
            document.body.scrollTop = document.documentElement.scrollTop = top - 20;
            timer = requestAnimationFrame(sTop);
        }else{
            cancelAnimationFrame(timer);
        }
    });
}
scroll_Top.addEventListener('click', scrollTop, false);

详解原生JS回到顶部的更多相关文章

  1. 原生js回到顶部

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

  2. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  3. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  4. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  5. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  6. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

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

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

  8. js回到顶部

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

  9. JS回到顶部代码小记

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

随机推荐

  1. Portainer介绍

    Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台操作.Swarm集群和服 ...

  2. 对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?

    首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: ...

  3. 【RL-TCPnet网络教程】第33章 SMTP简单邮件传输协议基础知识

    第33章      SMTP简单邮件传输协议基础知识 本章节为大家讲解SMTP(Simple Mail Transfer Protocol,简单邮件传输协议)的基础知识,方便后面章节的实战操作. (本 ...

  4. SDL 开发实战(七): 使用 SDL 实现 PCM播放器

    在上文,我们做了YUV播放器,这样我们就入门了SDL播放视频.下面我们来做一个PCM播放,即使用SDL播放PCM数据. 下面说明一下使用SDL播放PCM音频的基本流程,主要分为两大部分:初始化SDL. ...

  5. [Java]LeetCode141. 环形链表 | Linked List Cycle

    Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...

  6. [Swift]LeetCode275. H指数 II | H-Index II

    Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a ...

  7. [Swift]LeetCode403. 青蛙过河 | Frog Jump

    A frog is crossing a river. The river is divided into x units and at each unit there may or may not ...

  8. C# 多线程学习笔记 - 3

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  9. qt系统托盘显示、无主窗体

    系统图盘是应用程序经常用到的一个控件,当应用程序需要长时间存在的时候,这个控件会变得非常有用,比如,窗口隐藏,显示,关于.关闭等接口都可以放在图盘中处理,今天与到一个问题,需求是这样的:只需要显示图盘 ...

  10. 『数组的最大代价 贪心优化DP』

    数组的最大代价(51nod 1270) Description 数组A包含N个元素A1, A2......AN.数组B包含N个元素B1, B2......BN.并且数组A中的每一个元素Ai,都满足1 ...