基于Javascript实现返回顶部按钮

网络编程 2024/11/19 佚名

3 1 2

一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部.
那现在我们就来实现这么一个功能.

这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top.

<a href="#" class="top">顶部</a>

然后设置其样式表:

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

这里body设定为3000的高度, 主要是让页面有滚动的效果. 按钮一般都是放在网页的右边靠下一点的位置. 这里我们通过position来设置.

我们还要分析一下, 当用户的访问的网页在页面的顶部时, 这个按钮肯定是不显示的. 所以我们这里用了visibility来控制按钮的显示与否.

界面很简单, 我们就先将就一下. 下面来分析JS的实现.

首先这个按钮是在整个网页的效果上, 因此监听滚动事件需要设置在整个窗口上. 因此,我们给window设置一个onscroll事件.

window.onscroll = function (e) {...}

在这个事件里我们来控制返回顶部按钮的上下位置, 和是否显示. 首先来完成上下位置的控制.

上下位置的控制, 我们肯定得计算scrollTop的高度, 以及网页单屏显示的高度. 当用户进入页面的时候, 我们默认给这个按钮放置在页面右中部位置. 这时候的计算是:

var n_half_height = window.screen.height / 2;

将这个值赋给按钮的top属性.

然后如果用户滚动的时候, 位置肯定是保持不变的, 这时候的计算应该是

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

这是e 对象是onsroll里的参数event. 这里我使用的是谷歌浏览器.其他浏览器未测试. 如果需要兼容, 大家可以处理一下.
每滚动都得计算其高度, 所以这个应该是放入在onscroll事件中.然后,将这个值赋给按钮的top属性.

当然不要忘记一件事, 就是scrollTop为0的时候, 按钮不需要显示. 大于0的时候, 得让按钮显示. 前面讲过我们用visibility这个属性来控制的.这样代码就完整了.
Javascript完整代码

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

最后的效果展示：

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

Javascript返回顶部,Javascript返回顶部按钮

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“基于Javascript实现返回顶部按钮”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

基于Javascript实现返回顶部按钮

jquery trigger实现联动的方法

JavaScript实现斗地主游戏的思路

评论“基于Javascript实现返回顶部按钮”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接