基于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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
理解javascript中的闭包
Jan 11 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
vue-test-utils初使用详解
May 23 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php设置编码格式的方法
2013/03/05 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python 图片验证码代码
2008/12/07 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
Python实现简单http服务器
2018/04/12 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python中zip函数如何使用
2020/06/04 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
求职信格式要求
2014/05/23 职场文书
清洁员岗位职责
2015/02/15 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python