基于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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS常见算法详解
Feb 28 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript表单验证大全
2015/08/12 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
先进班集体事迹材料
2014/12/25 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
python区块链实现简版工作量证明
2022/05/25 Python