本文主要介绍基于JS实现的五种回写页面顶部方式的相关资料(从实现到增强)。这篇文章很详细，很实用，很有参考价值。有需要的朋友可以参考一下。
写法
【1】锚点
使用锚链接是返回顶部的简单实现。这种实现主要是在页面顶部放置一个具有指定名称的锚链接，然后在页面底部放置一个回锚的链接。用户可以单击该链接返回到锚点的顶部位置。
【注意】关于锚点移动的详细信息在这里。
body style=' height:2000 px；'
div id='topAnchor'/div
a href=' # top anchor ' style=' position:fixed；右：0；底部：0 '回到顶部/a
/body
【2】scrollTop
ScrollTop属性指示内容区域上方隐藏的像素数。当元素不滚动时，scrollTop的值为0；如果垂直滚动元素，scrollTop的值大于0，并指示元素上方不可见内容的像素宽度。
因为scrollTop是可写的，所以可以使用scrollTop实现返回顶部的功能。
[注意]关于页面上scrollTop兼容性的详细信息移到此处。
body style=' height:2000 px；'
按钮id=' test ' style=' position:fixed；右：0；底部：0 '返回顶部/按钮
脚本
test.onclick=function(){
document . body . scroll top=document . document element . scroll top=0；
}
/脚本
/body
【3】scrollTo()
scrollTo(x，y)方法滚动当前窗口中显示的文档，使文档中由坐标x和y指定的点位于显示区域的左上角。
设置scrollTo(0，0)可以达到返回顶部的效果。
body style=' height:2000 px；'
按钮id=' test ' style=' position:fixed；右：0；底部：0 '返回顶部/按钮
脚本
test.onclick=function(){
scrollTo(0，0)；
}
/脚本
/body
【4】scrollBy()
ScrollBy(x，y)方法滚动当前窗口中显示的文档，x和y指定滚动的相对量。
只要把当前页面的滚动长度作为参数，反向滚动就可以达到返回顶部的效果。
body style=' height:2000 px；'
按钮id=' test ' style=' position:fixed；右：0；底部：0 '返回顶部/按钮
脚本
test.onclick=function(){
var top=document . body . scroll top | | document . document element . scroll top
scrollBy(0，-top)；
}
/脚本
/body
【5】scrollIntoView()
Element.scrollIntoView方法将当前元素滚动到浏览器的可见区域。
这个方法可以接受一个布尔值作为参数。如果为true，则表示元素的顶部与当前区域可见部分的顶部对齐(前提是当前区域可以滚动)；如果为false，元素的底部与当前区域的可见部分的尾部对齐(假设当前区域可以滚动)。如果未提供此参数，则默认为true。
使用这种方法的原理与使用锚点的原理相似。当页面滚动时，目标元素被滚出页面区域。点击返回顶部按钮，使目标元素回到原来的位置，就会达到想要的效果。
body style=' height:2000 px；'
div id='target'/div
按钮id=' test ' style=' position:fixed；右：0；底部：0 '返回顶部/按钮
脚本
test.onclick=function(){
target . scrollintoview()；
}
/脚本
/body
增强
下面加强了回顶功能。
【1】显示增强
使用CSS绘图将“返回顶部”转换为可视图形(如果与IE8浏览器兼容，请使用图片)
使用CSS伪元素和伪悬停效果，当鼠标移动到元素上时，会显示回顶的文字，但移出时不会显示。
风格。方框{
位置：固定；
右：10px
底部：10px
高度：30px
宽度：50px
文本对齐：居中；
padding-top:20px；
背景色：浅蓝色；
边界半径：20%；
溢出：隐藏；
}。框：悬停：之前{
最高：50%
}。框：悬停。收件箱{
可见性：隐藏；
}。框：之前{
位置：绝对；
顶：-50%；
左：50%；
transform: translate(-50%，-50%)；
内容：‘回到顶端’；
宽度：40px
颜色：秘鲁；
字体粗细：粗体；
}。收件箱{
可见性：可见；
显示：内嵌-块；
高度：20px
宽度：20px
边框：3px纯黑；
边框颜色：白色透明透明白色；
变换：旋转(45度)；
}
/风格
body style=' height:2000 px；'
div id='box' class='box '
div class='box-in'/div
/div
/body
【2】动画增强
为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部
动画有两种：一种是半铸钢钢性铸铁(铸造半钢)动画，需要有样式变化配合过渡；一种是Java语言（一种计算机语言，尤用于创建网站）描述语言动画，使用定时器来实现
在上面的5种实现中，scrollTop、scrollTo()和scrollBy()方法可以增加动画，且由于无样式变化，只能增加Java语言（一种计算机语言，尤用于创建网站）描述语言动画
定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用，下面使用性能最好的定时器requestAnimationFrame来实现
[注意]IE9-浏览器不支持该方法，可以使用设置超时来兼容
1、增加scrollTop的动画效果
使用定时器，将滚动顶部的值每次减少50,直到减少到0,则动画完毕
脚本
var timer=null
box.onclick=function(){
取消动画帧(定时器);
timer=requestAnimationFrame(函数fn(){
var oTop=文档。身体。向上滚动| |文档。文档元素。滚动顶部；
if(oTop 0){
文档。身体。顶部滚动=文档。文档元素。scroll top=oTop-50；
timer=requestAnimationFrame(fn)；
}否则{
取消动画帧(定时器);
}
});
}
/脚本
2、增加scrollTo()动画效果
将scrollTo(x，y)中的y参数通过滚动顶部值获取，每次减少50,直到减少到0,则动画完毕
脚本
var timer=null
box.onclick=function(){
取消动画帧(定时器);
timer=requestAnimationFrame(函数fn(){
var oTop=文档。身体。向上滚动| |文档。文档元素。滚动顶部；
if(oTop 0){
scrollTo(0，oTop-50)；
timer=requestAnimationFrame(fn)；
}否则{
取消动画帧(定时器);
}
});
}
/脚本
3、增加scrollBy()动画效果
将scrollBy(x，y)中的y参数设置为-50,直到滚动顶部为0,则回滚停止
脚本
var timer=null
box.onclick=function(){
取消动画帧(定时器);
timer=requestAnimationFrame(函数fn(){
var oTop=文档。身体。向上滚动| |文档。文档元素。滚动顶部；
if(oTop 0){
scrollBy(0，-50)；
timer=requestAnimationFrame(fn)；
}否则{
取消动画帧(定时器);
}
});
}
/脚本
实现
由于scrollTop、scrollBy()和scrollTo()方法，都以滚动顶部值是否减少为0作为动画停止的参照，且三个动画的原理和实现都基本相似，性能也相似。最终，以最常用的滚动顶部属性实现动画增强效果
当然，如果觉得50的速度不合适，可以根据实际情况进行调整
风格。方框{
位置：固定；
右：10px
底部：10px
高度：30px
宽度：50px
文本对齐：居中；
padding-top:20px；
背景色：浅蓝色；
边界半径：20%;
溢出：隐藏；
}。框：悬停：之前{
最高：50%
}。框：悬停。收件箱{
可见性：隐藏；
}。框：之前{
位置：绝对；
顶：-50%;
左：50%;
transform: translate(-50%，-50%)；
内容：'回到顶部；
宽度：40px
颜色：秘鲁；
字体粗细：粗体；
}。收件箱{
可见性：可见；
显示：内嵌-块；
高度：20px
宽度：20px
边框：3px纯黑；
边框颜色：白色透明透明白色；
变换：旋转(45度);
}
/风格
body style=' height:2000 px；'
div id='box' class='box '
div class='box-in'/div
/div
/body
脚本
var timer=null
box.onclick=function(){
取消动画帧(定时器);
timer=requestAnimationFrame(函数fn(){
var oTop=文档。身体。向上滚动| |文档。文档元素。滚动顶部；
if(oTop 0){
文档。身体。顶部滚动=文档。文档元素。scroll top=oTop-50；
timer=requestAnimationFrame(fn)；
}否则{
取消动画帧(定时器);
}
});
}
/脚本
以上所述是小编给大家介绍的基于射流研究…实现回到页面顶部的五种写法（从实现到增强)的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。