基于JS实现回到页面顶部的五种写法(从实现到增强)


Posted in Javascript onSeptember 03, 2016

写法

【1】锚点

使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置

[注意]关于锚点的详细信息移步至此

<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

【2】scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度

由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能

[注意]关于页面的scrollTop的兼容问题详细内容移步至此

<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
</script>
</body>

【3】scrollTo()

scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角

设置scrollTo(0,0)可以实现回到顶部的效果

<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
scrollTo(0,0);
}
</script>
</body>

【4】scrollBy()

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量

只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果

<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top);
}
</script>
</body>

【5】scrollIntoView()

Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 

该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true

使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果

<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>

增强

下面对回到顶部的功能进行增强

【1】显示增强

使用CSS画图,将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器,则用图片代替)

使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上时,显示回到顶部的文字,移出时不显示

<style>
.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);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div> 
</body>

【2】动画增强

为回到顶部增加动画效果,滚动条以一定的速度回滚到顶部

动画有两种:一种是CSS动画,需要有样式变化配合transition;一种是javascript动画,使用定时器来实现

在上面的5种实现中,scrollTop、scrollTo()和scrollBy()方法可以增加动画,且由于无样式变化,只能增加javascript动画

定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用,下面使用性能最好的定时器requestAnimationFrame来实现

[注意]IE9-浏览器不支持该方法,可以使用setTimeout来兼容

1、增加scrollTop的动画效果

使用定时器,将scrollTop的值每次减少50,直到减少到0,则动画完毕

<script>
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);
} 
});
}
</script>

2、增加scrollTo()动画效果

将scrollTo(x,y)中的y参数通过scrollTop值获取,每次减少50,直到减少到0,则动画完毕

<script>
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);
} 
});
}
</script>

  3、增加scrollBy()动画效果

将scrollBy(x,y)中的y参数设置为-50,直到scrollTop为0,则回滚停止

<script>
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);
} 
});
}
</script>

实现

由于scrollTop、scrollBy()和scrollTo()方法,都以scrollTop值是否减少为0作为动画停止的参照,且三个动画的原理和实现都基本相似,性能也相似。最终,以最常用的scrollTop属性实现动画增强效果

当然,如果觉得50的速度不合适,可以根据实际情况进行调整

<style>
.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);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div> 
</body>
<script>
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);
} 
});
}
</script>

以上所述是小编给大家介绍的基于JS实现回到页面顶部的五种写法(从实现到增强)的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 #Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 #Javascript
AngularJs Managing Service Dependencies详解
Sep 02 #Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 #Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 #Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 #Javascript
AngularJs  Using $location详解及示例代码
Sep 02 #Javascript
You might like
一个经典的PHP文件上传类分享
2014/11/18 PHP
浅析PHP文件下载原理
2014/12/25 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
python中使用序列的方法
2015/08/03 Python
python实现八大排序算法(2)
2017/09/14 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
用python读取xlsx文件
2020/12/17 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
小学班主任培训方案
2014/06/04 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
导游词之张家界
2019/10/31 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
Redis+AOP+自定义注解实现限流
2022/06/28 Redis