页面滚动
事件：window.onscroll，
获得页面滚动位置：document.body.scrollTop；

HTML代码：

这里注意此处逻辑，大于500就显示，否则就隐藏，还有注意如果变量名设置为top的话，就出错，都是小坑。

我们知道可以利用a标签的#回到顶部效果，但是速度过快，导致用户体验不是太好，这里，可以利用JS实现回到顶部的效果：

这是最终些的代码，感觉代码过于冗余，后面想办法完善下。

页面滚动事件和利用JS实现回到顶部效果的更多相关文章

  1. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

  3. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  4. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  5. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  6. javascript 特效实现(2)——回到顶部效果

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

  7. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ScrollReveal-元素随页面滚动产生动画的js插件

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scro ...

  9. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

随机推荐

  1. [转]Visual Studio 2010单元测试（3）－－顺序单元测试

    之前我们做的测试都是一个一个进行的,当然我们也可以一次性选择多个测试方法进行,但是测试运行的顺序以“测试列表编辑器”窗口中的默认列表顺序为准.在实际场景中,我们需要进行有顺序的单元测试,步骤可能每一步 ...

  2. webpack:Cannot find module 'extract-text-webpack-plugin'

    问题: 在终端中使用此命令安装了extract-text-webpack-plugin,npm install -g extract-text-webpack-plugin并在webpack.conf ...

  3. HZOI2019 砍树 整除分块

    题目链接:https://www.cnblogs.com/Juve/articles/11207540.html(密码你懂的)——————————>> 这题... 一开始想的二分,但此题不 ...

  4. html常用标签详解2-图片标签详解

    <img /> 1.图片标签的属性 图片标签属于行内块元素,它自身的属性有一下几个,听我娓娓道来: src:图片资源的路径(resourse),可以使绝对路径,也可以是相对路径 绝对路径: ...

  5. phpqrcode.php 生成二维码图片用于推广

    <?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...

  6. 基于阿里云安装脚本扩展 之 自动安装mongodb及php扩展

    好久没有发布文章了,有点跟不上当初这个博客的初衷.为了使自己的博客更新不半途而废,今天特意再写了一个自动安装脚本,一样是基于阿里云的服务端安装脚本进行的扩展.闲话不说,直接放代码: #!/bin/ba ...

  7. 原型模式(Prototype)（对象、克隆广告邮件）

    有些对象创建过程较为复杂,而且有些时候需要频繁的创建,原型模式通过给出一个原型对象来指明所要创建的对象的类型,然后复制这个原型对象的方法创建更多同类型的对象.这就是原型模式的动机. 原型模式的主要思想 ...

  8. MR过程解析（转自about云）

     图中1:表示待处理数据,比如日志,比如单词计数图中2:表示map阶段,对他们split,然后送到不同分区图中3:表示reduce阶段,对这些数据整合处理.图中4:表示二次mapreduce,这个是m ...

  9. 2019-8-30-BAT-脚本判断当前系统是-x86-还是-x64-系统

    title author date CreateTime categories BAT 脚本判断当前系统是 x86 还是 x64 系统 lindexi 2019-08-30 08:47:40 +080 ...

  10. kuangbin带我飞QAQ DLX之一脸懵逼

    1. hust 1017 DLX精确覆盖 模板题 勉强写了注释,但还是一脸懵逼,感觉插入方式明显有问题但又不知道哪里不对而且好像能得出正确结果真是奇了怪了 #include <iostream& ...