基于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中获取样式的原生方法小结
Oct 08 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP基础知识回顾
2012/08/16 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
python之文件读取一行一行的方法
2018/07/12 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python如何实现复制目录到指定目录
2020/02/13 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
python3中编码获取网页的实例方法
2020/11/16 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
部队学习十八大感言
2014/01/11 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
Nginx跨域问题解析与解决
2022/08/05 Servers