页面滚动
事件：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. [转]基于MefBootstrapper的Bootstrapper

    public class Bootstrapper : MefBootstrapper    {        ModuleCatalog moduleCatalog; protected overr ...

  2. JZOJ5883【NOIP2018模拟A组9.25】到不了——动态LCA裸题

    题目描述 Description wy 和 wjk 是好朋友. 今天他们在一起聊天,突然聊到了以前一起唱过的<到不了>. "说到到不了,我给你讲一个故事吧." &quo ...

  3. SQL语句中GROUP BY的问题

    今天查询数据库时用到集合函数sum(drp),遇到问题: 百度后,确定如下问题:当select后面查询字段有sum(drp)以外的字段时,必须使用group by函数,对数据进行排序,且查询字段中除s ...

  4. 深入浅出 Java Concurrency (21): 并发容器 part 6 可阻塞的BlockingQueue (1)[转]

    在<并发容器 part 4 并发队列与Queue简介>节中的类图中可以看到,对于Queue来说,BlockingQueue是主要的线程安全版本.这是一个可阻塞的版本,也就是允许添加/删除元 ...

  5. 014-unittest扩展

    unittest扩展 1. unittest框架里面---verbosity设置这里的verbosity是一个选项,表示测试结果的信息复杂度,有三个值: 0 (静默模式): 你只能获得总的测试用例数和 ...

  6. KeyOnlyFilter（2）

    主要用来过滤剩下行键计数一类 KeyOnlyFilter 官方API解释如下: A filter that will only return the key component of each KV ...

  7. 公司jar包提交到集群的方法

    yarn -jar xx.jar 此时包会提交到集群上运行 也可以把jar包放到hbase 的lib下面用hbase jar 方式调用

  8. mysql load date to Hbase

    一.mysql迁移数据进hbase需要配置好配置文件 用sqoop 命令进行迁移 二. 配置文件内容: import--connectjdbc:mysql://172.18.32.99:3306/te ...

  9. npm install时出现error

    今天启动vue前端时,发现依赖没了.于是乎cmd->npm install->更新了部分依赖后,出现error信息,提示更新依赖失败.很奇怪,原来这个项目都是好的,为啥突然更新下来依赖了呢 ...

  10. CodeForces - 627A

    CodeForces - 627Ahttps://vjudge.net/problem/326413/origina+b == (a&b)<<1 +(a^b);然后是位运算,如果对 ...