js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法
【1】锚点
使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置
[注意]关于锚点的详细信息移步至此
回到顶部
【2】scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能
[注意]关于页面的scrollTop的兼容问题详细内容移步至此
回到顶部
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
【3】scrollTo()
scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
回到顶部
test.onclick = function(){
scrollTo(0,0);
}
【4】scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果
回到顶部
test.onclick = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
}
【5】scrollIntoView()
Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true
使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果
回到顶部
test.onclick = function(){
target.scrollIntoView();
}
增强
下面对回到顶部的功能进行增强
【1】显示增强
使用CSS画图,将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器,则用图片代替)
使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上时,显示回到顶部的文字,移出时不显示
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到顶部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
【2】动画增强
为回到顶部增加动画效果,滚动条以一定的速度回滚到顶部
动画有两种:一种是CSS动画,需要有样式变化配合transition;一种是javascript动画,使用定时器来实现
在上面的5种实现中,scrollTop、scrollTo()和scrollBy()方法可以增加动画,且由于无样式变化,只能增加javascript动画
定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用,下面使用性能最好的定时器requestAnimationFrame来实现
[注意]IE9-浏览器不支持该方法,可以使用setTimeout来兼容
1、增加scrollTop的动画效果
使用定时器,将scrollTop的值每次减少50,直到减少到0,则动画完毕
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
2、增加scrollTo()动画效果
将scrollTo(x,y)中的y参数通过scrollTop值获取,每次减少50,直到减少到0,则动画完毕
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
3、增加scrollBy()动画效果
将scrollBy(x,y)中的y参数设置为-50,直到scrollTop为0,则回滚停止
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollBy(0,-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
实现
由于scrollTop、scrollBy()和scrollTo()方法,都以scrollTop值是否减少为0作为动画停止的参照,且三个动画的原理和实现都基本相似,性能也相似。最终,以最常用的scrollTop属性实现动画增强效果
当然,如果觉得50的速度不合适,可以根据实际情况进行调整
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到顶部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
以上所述是小编给大家介绍的基于JS实现回到页面顶部的五种写法(从实现到增强)的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)相关推荐
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
为什么80%的码农都做不了架构师?>>> 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返 ...
- java clone方法_干货满满:Java中创建对象的五种方式详解
通常来说,对象具有状态和行为,变量用来表明对象的状态,方法表明对象所具有的行为. 作为Java开发者,我们通常都是使用依赖管理系统,比如Spring去创建Java对象,但使用管理系统创建对象并不是唯一 ...
- python最快的循环方法_【转】【Python效率】五种Pandas循环方法效率对比
[Python效率]五种Pandas循环方法效率对比 - 文兄的文章 - 知乎 https://zhuanlan.zhihu.com/p/80880493 正文: 如果你使用过Python及Panda ...
- js ios调用ios方法_通过iOS 13的模式演示调用生命周期方法
js ios调用ios方法 iOS 13 was legendary iOS 13传奇 iOS 13 brought many cool things; dark mode, sign in with ...
- h5 数字变化_基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标 以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(num ...
- js微信抢红包脚本代码_基于Auto.js的微信红包监测
前段时间接触了下Auto.js(https://github.com/hyb1996/Auto.js),很好上手而且挺有意思,于是写了个微信红包监测脚本 大概思路是,不断获取手机屏幕截图,发现新消息则 ...
- js 万年历农历转阳历 方法_利用JS制作万年历的方法
本篇文章主要介绍了利用JS制作万年历的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网 ...
- js阻止子元素事件_阻止 JS 的冒泡事件
用了一段时间google inbox,赶脚mail task的样式很酷炫,于是也模仿着做了一个task管理系统. Google task有个behavior是点击页面别处,当前展开的mail就会收起. ...
- js list删除指定元素_删除js数组中的指定元素,有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
最新文章
- (札记)Altera Stratix IV系列FPGA TRUE LVDS RX input termination 在Quartus工程中的设置方法...
- Java axis 配置host_Java AxisProperties类代码示例
- 400全集python全套视频教程-千锋出品全套python视频教程,400大全集,你了解吗?...
- zabbix开启报警声音 网页也可以有声音
- Javascript——说说js的调试
- OpenCV视频加速Video acceleration的实例(附完整代码)
- Java EE:基础知识
- 委婉的拒绝offer
- 蓝桥杯上Excel地址c语言,C语言求解Excel地址转换问题
- 刘强东夫妇向英国捐赠大量防疫物资:在英华侨及留学生可免费认领
- AcWing 1054. 股票买卖
- (TOJ1224)数据结构练习题——后序遍历二叉树
- 快速H.264编码算法的研究及实现
- Qt之QSS使用与基本语法
- 睿智的目标检测37——TF2搭建SSD目标检测平台(tensorflow2)
- 如何做客户分析?客户分析的内容有哪些?
- Python第四天——requests实战
- 华为设备配置小型园区网
- UltraISO使用和U盘安装原版系统指南
- javaScript搜索框