jQuery中页面返回顶部的方法总结
当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。
方法一 锚点定位
1
|
<a href= "#" class= "top" id= "top" >返回頂部</a> |
这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。
方法二 window.scrollTo(x,y)
1
|
<a href= "javascript:scrollTo(0,0)" class= "top" id= "top" >返回頂部</a> |
这种方法也很方便,并且不会刷新页面,缺点是没有滚动效果。
scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标,比如我设置scrollTo(100,100),就是让滚动内容的坐标(100,100)的点处在视口的左上角。
方法三 jQuery插件设置带有动画效果的滚动
原生方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/* html部分 */ <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <a href= "javascript:;" class= "top" id= "top" >返回頂部</a> </body> <style> /* css部分 */ div { height: 150px; } div:nth-child(odd) { padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#8ae238; } div:nth-child(even) { padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#66d9ef; } .top { position: fixed; right: 50px; bottom: 50px; display: block; width: 50px; height: 50px; font-size: 20px;
display: none; } </style> <script> /* js代码 */ var topBtn = document.getElementById( 'top' ); // 获取视窗高度 var winHeight = document.documentElement.clientHeight; window.onscroll = function () { // 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理 var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 如果滚动超过一屏,返回顶部按钮出现,反之隐藏 if (toTop>=winHeight){ topBtn.style.display = 'block' ; } else { topBtn.style.display = 'none' ; } } topBtn.onclick= function () { var timer = setInterval( function () { var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动 if (toTop == 0){ clearInterval(timer); } else { // 设置滚动速度 var speed = Math.ceil(toTop/5); // 页面向上滚动 document.documentElement.scrollTop=document.body.scrollTop=toTop-speed; } },50); } </script> |
大概的思路就是:
为window绑定scroll事件,监听页面滚动距离,当超过一屏高度时,显示返回顶部的按钮
为按钮绑定点击事件,返回顶部的方法就是获取页面滚动的距离,然后计算步长,这里采用滚动距离除以5的方式,滚动速度由快到慢。这里使用js定时器控制滚动的频率,建议设置较小一点的值,如果时间间隔过大会有‘跳帧'的感觉。
这种方法优点是有了动画效果,只是实现起来比较麻烦,下面介绍一下jQuery方法。
jQuery特效方法
jQuery方法只是在js代码部分不同,具体代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script> /* js代码 */ $(window).on( 'scroll' , function () { // 判断显示还是隐藏按钮 if ($( this ).scrollTop()>=$( this ).height()){ $( '#top' ).fadeIn( 'slow' ); } else { $( '#top' ).fadeOut( 'slow' ); } }); $( '#top' ).on( 'click' , function () { // 设置滚动动画,这里注意使用的是$('body')不是$(window) $( 'body' ).animate({scrollTop: '0' },500); }); </script> |
jQuery方法的优点是方便,而且动画效果比较流畅。
这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象,因为我们是要设置body的scrollTop属性。
总结
三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。
jQuery中页面返回顶部的方法总结的更多相关文章
- 关于 ionic3 tabs 导航ico 点击 页面返回顶部
类似微信 双击 页面返回顶部功能,ionic3 中有一个 Content. 将 import { Content } from 'ionic-angular'; 放入想要实现此功能的 ts中. 实例化 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- 使用jQuery简单实现返回顶部的一个小案例
1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
随机推荐
- Eclipse 中 Maven 项目 pom.xml 提示错误 org.codehaus.plexus.archiver.jar.Manifest.write(java.io.PrintWriter)
从SVN上下载到Eclipse工作空间的项目一直报如下错误,进行一下Maven ---> Update Project... 就不报错了,但是过一会又会报错 查找资料初步确定是Eclipse中自 ...
- nginx 日志切割脚本
#!/bin/shLOG_PATH=/home/test/nginx/logsNEW_LOG_PATH=/home/test/nginx/dayslogNGING_PID=$(cat /home/te ...
- Kubernetes集群搭建之系统初始化配置篇
Kubernetes的几种部署方式 1. minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境 ...
- Ocelot简易教程(三)之主要特性及路由详解
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...
- mysql 开发基础系列8 表的存储引擎
一. 表的存储引擎 1. 概述 插件式存储引擎是mysql数据库最重要的特性之一, 用户可以根据应用的需要选择如何存储和索引数据,是否使用事务等.在mysql 5.0里支持的引擎包括: MyISAM, ...
- [ASP.NET MVC]笔记(四) UnobtruSive AJAX和客户端验证
UnobtruSive AJAX和客户端验证 ASP.NET MVC 已经默认开启非侵入试js和客户端验证,在web.config可以看到如下配置: <configuration> < ...
- ES6躬行记(8)——数字
一.进制 ES6不仅完善了数字的八进制形式,还补充了一种十六进制形式,并且添加了全新的二进制形式.下面的三个变量分别表示八进制.十六进制和二进制的10,注释中给出了该进制的另一种写法. var oct ...
- gradle 自定义插件 下载配置文件
1.新建Gradle项目: 2.建立src/main/groovy目录,并添加如下代码: ConfigPlugin.groovy package com.wemall.config import or ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
- 如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操作
https://blog.csdn.net/zhanlv/article/details/76504414 将SVN集成到Eclpise第一种方法第一种方法是通过zip文件在Eclipse中安装(本插 ...