基于Javascript实现的返回顶部按钮

当网页中有更多的内容时，数据将显示在不同的屏幕上。如果屏幕很多，用户访问的数据已经到达页面底部，所以返回顶部需要一点时间。这可能有点不如用户体验。因此，对于页面数据较多的网页，将使用“返回顶部”按钮快速跳转到网页顶部。现在我们将实现这样一个功能。

我们在这个页面上不写任何数据，只是添加一个A标签作为返回顶部的按钮，给他一个：top的类名。

A href='#' class='top' top /a然后将其样式表设置为：

车身{ height: 3000px}.top { position:绝对值；top: 120pxdisplay:内联块；宽度： 50px；高度： 50px；线高： 50px；文本装饰：无；文本对齐：中心；背景色： # 666666；color: # ffffffright: 10pxtransition:全部0.3svisibility:隐藏；} . top : hover { background-color : # ff 3300；}这里将正文设置为3000的高度，主要是让页面滚动。按钮通常放在网页的右下方。这里，我们按位置设置。

我们还需要分析，当用户访问的网页在页面顶部时，这个按钮肯定不会显示。因此，我们在这里使用可见性来控制按钮是否显示。

界面很简单，我们先来做一下。我们来分析一下JS的实现。

首先这个按钮是在整个网页的效果上，所以需要在整个窗口上设置监控滚动事件。因此，我们为窗口设置了一个onscroll事件。

窗户。on scroll=function(e){ 0.}在此事件中，我们控制后顶按钮的上下位置以及是否显示。首先，我们完成对上下位置的控制。

对于上下位置的控制，我们必须计算scrollTop的高度和网页单屏显示的高度。当用户进入页面时，我们会默认将这个按钮放在页面的右中间位置。此时的计算是：

var n _ half _ height=window . screen . height/2；将此值赋给按钮的顶部属性。

然后，如果用户滚动时位置必须保持不变，此时的计算应该是。

var n _ stop=e . target . scrollingelement . scroll top；//获取scroll top var n _ top=n _ stop n _ half _ height的高度；//获取位置。这是e对象，它是onsroll中的参数事件。这里我用的是谷歌浏览器。其他浏览器还没有经过测试。如果需要兼容性，每个人都可以处理。每个卷轴都必须计算它的高度，所以这应该放在一个卷轴事件中。然后，将该值分配给按钮的顶部属性。

当然，别忘了一件事，就是当scrollTop为0时，按钮不需要显示。当大于0时，必须显示该按钮。如前所述，我们使用可见性属性来控制它。那么代码就完成了。Javascript完成了。

var ele _ body=document.bodyvar ele _ top=document . getelementsbyclassname(' top ')[0]；var n _ half _ height=window . screen . height/2；ele _ top . style . top=n _ half _ height ' px '；window . on scroll=function(e){ var n _ stop=e . target . scrollingelement . scroll top；if(n _ stop===0){ ele _ top . style . visibility=' hidden '；} else { ele _ top . style . visibility=' visible '；} var n _ top=n _ stop n _ half _ heightele _ top . style . top=n _ top ' px '；}最终效果显示：

以上就是本文的全部内容，希望对大家的学习有所帮助。