页面滚动
事件：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. Linux 修改环境变量，重定向

    1.Linux下更改(当前用户)环境变量:在terminal下输入vim ~/.profile进入后,在最后一行添加PATH="-----------------:$PATH",添 ...

  2. Ionic JPush极光推送二

    1.看图解决问题   2.解决出现统计代码提示问题 修改这个java 文件 导入命名空间 import cn.jpush.android.api.JPushInterface; 添加方法 @Overr ...

  3. PipeCAD之管道标准库PipeStd(3)

    PipeCAD之管道标准库PipeStd(3) Key Words: PipeCAD, PipeStd, Pipe Design 3D, Linux 1. Introduction    管道标准部件 ...

  4. PAT甲级——A1044 Shopping in Mars

    Shopping in Mars is quite a different experience. The Mars people pay by chained diamonds. Each diam ...

  5. 【DM642学习笔记九】XDS560仿真器 Can't Initialize Target CPU

    以前用的瑞泰的ICETEK-5100USB仿真器,现在换成XDS560试了试,速度快多了.把720*576的图片在imgae中显示也只需要四五秒钟.而5100仿真器需要三四分钟. 仿真器驱动安好后,刚 ...

  6. diango中orm的惰性机制

    那么首先要知道什么是ORM 专业化的角度来说:叫对象关系映射(Object-Relation Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 那具体ORM是什么呢?:( ...

  7. 03Redis入门指南笔记(事务、生存时间、排序、消息通知、管道)

    一:事务 1:概述 Redis中的事务(transaction)是一组命令的集合.事务同命令一样都是Redis的最小执行单位,一个事务中的命令要么都执行,要么都不执行. 事务的原理是是先将属于一个事务 ...

  8. Dom直接选择器

    Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...

  9. C#中使用设置(Settings.settings) Properties.Settings.Default

    应用程序及用户设置 在设计时创建新设置的步骤 在“Solution Explorer”(解决方案资源管理器)中,展开项目的“Properties”(属性)节点. 在“Solution Explorer ...

  10. 在vscode中使用字体Cascadia Code

    下载字体 下载地址:github:https://github.com/microsoft/cascadia-code/releases 安装字体(windows10) 设置 > 个性化 > ...