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

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

本文主要介绍基于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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: