基于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 相关文章推荐
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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网站判断用户是否是手机访问的方法
2013/11/01 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
中科创达面试题
2016/12/28 面试题
毕业生个人求职信范例分享
2013/12/17 职场文书
自我介绍演讲稿
2014/01/15 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
家长写给孩子的评语
2014/04/18 职场文书
员工考核评语大全
2014/04/26 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python