基于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 相关文章推荐
8个实用的jQuery技巧
Mar 04 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
原生js实现贪吃蛇游戏
Oct 26 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
js loading加载效果实现代码
2009/11/24 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python中defaultdict的用法详解
2017/06/07 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
傲盾软件面试题
2015/08/17 面试题
EJB实例的生命周期
2016/10/28 面试题
企业军训感言
2014/02/08 职场文书
高中运动会入场词
2014/02/14 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android