基于Javascript实现返回顶部按钮


Posted in Javascript onFebruary 29, 2016

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

这个页面我们就不写什么数据, 直接就加入一个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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
Vue自定义指令详解
Jul 28 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
jQuery取消特定的click事件
Feb 29 #Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
JS三级可折叠菜单实现方法
Feb 29 #Javascript
精通JavaScript的this关键字
May 28 #Javascript
javascript正则表达式总结
Feb 29 #Javascript
javascript计时器编写过程与实现方法
Feb 29 #Javascript
You might like
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP线程的内存回收问题
2016/07/08 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Django 用户认证组件使用详解
2019/07/23 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
大学生咖啡店创业计划书
2014/01/21 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript