原生JS实现平滑回到顶部组件


Posted in Javascript onMarch 16, 2016

返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置。

实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可。

本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果如下

原生JS实现平滑回到顶部组件

由于思路跟代码都很简单,所以就直接贴出实现细节了:

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
};

调用方式:

<script>
new BackTop(document.getElementById('backTop'))
</script>

之所以写这篇博客,弄这么个简单的东西,有两个方面的原因:

1)这段时间一直在手写一些常见的简单组件,这算是一个简单中更简单的一个,为了让这系列的博客更加完整,所以把这个组件补充了进来;

2)我想表达自己在工作过程中的一个观点:就是不要过渡用用户体验来装饰你的软件或者说产品,用户体验这个东西说白了就是两个词,一个是好印象,第二个就是好玩,但这并不是产品开发运营的最终目的,你把东西做的再漂亮,产品的核心价值和服务做的不够的话,就算把返回顶部这种功能做成超级无敌的火箭也是徒劳无功的。做前端开发,得锻炼点控制产品经理瞎提用户体验功能的度,以这个组件来说,我认为做加速或减速效果都是多余的,既增加开发时间,又耽误用户使用的时间,抛弃自己心中那点对技术玩弄的固执,可以让自己的工作做的更加完美。

下面给大家分享几种常用网页返回顶部代码

一、使用HTML的锚标记最简单了

但是唯一的缺点就是样式不怎么样,会显示这个锚标记。

<aname="top"id="top"></a>

放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。

页面底部放置:

<ahref="#top"target="_self">返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:

方式1(推荐:简单方便):

<ahref="javascript:scroll(0,0)">返回顶部</a>

scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。

方式2(注重效果:缓慢向上):

本方式是渐进式返回顶部,要好看一些,代码如下:

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

三、使用Onload加上scroll功能实现动态返回顶部

首先在网页body标签结束之前加上:

<divid="gotop">返回顶部</div>

2、再调用以下JS脚本部分:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

这些可以放到网页中中,也可以独立存成一个js文件,比如gotop.js,再通过以下形式:

<scriptsrc="/js/gotop.js"type=text/javascript></script>

来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设文件路径为JS,放在其它位置请根据实际修改。

Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
JavaScript隐式类型转换
Mar 15 #Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 #Javascript
Angularjs整合微信UI(weui)
Mar 15 #Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 #Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
PHP+DBM的同学录程序(4)
2006/10/09 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
浅谈Python type的使用
2019/11/19 Python
NumPy统计函数的实现方法
2020/01/21 Python
pycharm快捷键汇总
2020/02/14 Python
python实现飞船大战
2020/04/24 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
乡镇信息公开实施方案
2014/03/23 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
学生会主席演讲稿
2014/04/25 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
贷款承诺书范文
2014/05/19 职场文书
擅自离岗检讨书
2014/09/12 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
门球健将观后感
2015/06/16 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
python处理json数据文件
2022/04/11 Python