页面滚动
事件：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. 【NOIP2018模拟11.01】树

    题目 描述 题目大意 维护一个序列,支持三种操作: 1.修改一段区间,将这段区间内的所有数都andandand一个数. 2.询问区间和. 3.询问区间两两相加的平方和. N≤10000N\leq 10 ...

  2. 我认为最节省时间的CSS命名规范

    CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...

  3. 《Python机器学习及实践：从零开始通往Kaggle竞赛之路》

    <Python 机器学习及实践–从零开始通往kaggle竞赛之路>很基础 主要介绍了Scikit-learn,顺带介绍了pandas.numpy.matplotlib.scipy. 本书代 ...

  4. 使用Tomcat过程中的常见问题

    1.点击startup.bat,启动Tomcat     DOS弹窗一闪而过 鼠标选中startup.bat这个文件,右键选择“编辑“,在末尾添加        pause

  5. kafka使用示例

    示例代码如下: producer生产者 package main import ( "fmt" "github.com/Shopify/sarama" ) fu ...

  6. Tomcat服务器的安装及配置

    学习目标: 了解Tomcat服务器的主要作用 掌握Tomcat服务器的安装与配置 掌握Tomcat安装目录下主要文件夹的作用 jsp的执行流程 1.Web的工作原理流程图:从图中可以看出Tomcat服 ...

  7. Leetcode179. Largest Number最大数

    给定一组非负整数,重新排列它们的顺序使之组成一个最大的整数. 示例 1: 输入: [10,2] 输出: 210 示例 2: 输入: [3,30,34,5,9] 输出: 9534330 说明: 输出结果 ...

  8. Leetcode131. Palindrome Partitioning分割回文串

    给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回 s 所有可能的分割方案. 示例: 输入: "aab" 输出: [ ["aa",&quo ...

  9. 干货来了！2019阿里云合作伙伴峰会SaaS加速器专场回顾合集：嘉宾分享、深度解读

    2019年7月26日,在上海举办的阿里云合作伙伴峰会上,阿里云正式发布SaaS生态战略,计划用阿里云的品牌.渠道.资本.方法论.技术加持伙伴,成就亿级营收独角兽. 该生态战略计划招募10家一级SaaS ...

  10. MacBook安装QF9700网卡驱动

    HOW TO USE A GENERIC USB ETHERNET ADAPTER QF9700 ON MAC OS X  20 February 2016  macOS  Zahid Mahmood ...