页面滚动
事件：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. 模板：KD-Tree

    KD-Tree,用来解决多维空间中的问题,其实就是优化暴力(逃 一般cdq能做的它都能做,而且...既然是优化暴力,那就学习一下了 对与几个n维点,我们将它每一维分割,建立一颗二叉树,方便我们搜索剪枝 ...

  2. spfa模版

    #include<bits/stdc++.h> using namespace std; int n,m;//点边 int beginn; ],v[],w[]; ],nextt[]; ]; ...

  3. day65作业

    有 红.黄.蓝 三个按钮,以及一个200x200矩形框box,点击不同的按钮,box的颜色会被切换为指定的颜色 <body> <div id="app"> ...

  4. js节点

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

  5. 知道了为什么osg::impostor可以这样设置geometry的QUADS了

    之前一直不理解为什么osg::impostor里面的impostorSprite可以直接设置impostorSprite->getCoords()来设置geometry的四个边角,其实是因为这个 ...

  6. 配置android studio环境

    配置java jdk 1.1运行exe 程序 1.2配置jdk 环境变量 添加环境变量 ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin .;%JAVA_HOME%\lib;% ...

  7. MySQL用命令行复制表，查看表结构

    一.mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表 1 CREATE TABLE 新表 SELECT * FROM 旧表 WHERE 1=2; 或 1 CREATE TA ...

  8. 使用springMvc对象属性自动封装从jsp向controller传值

    controller通过ModelAndView向前台传传递信息 jsp也可以通过model向controller传递信息 这只是其中的一个办法,还有其他几种方式进行前后端的数据交互 如何才能让spr ...

  9. 推荐大家自学的java学习网站，生动的讲解适合刚入门

    java学习网站(不仅仅是只学习java的知识):http://how2j.cn 首先大家来看看这个网站都有些啥 首页:图中的左侧目录大家看到了,从java基础到高级,从后台技术到前端页面,数据库,还 ...

  10. Spring Boot邮件功能

    1.应用场景 邮件功能的应用场景可谓十分广泛,诸如注册用户.密码找回,消息通知.以及一些程序异常通知等都需要使用到该功能. 正是由于邮件功能的使用广泛,因此springboot也加在它的组件中添加了邮 ...