原生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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
基于jquery实现图片放大功能
May 07 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
基于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
Banner程序
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
python基础教程项目四之新闻聚合
2018/04/02 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
详解Python 函数如何重载?
2019/04/23 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
高中生校园生活自我评价
2013/09/19 职场文书
公司端午节活动方案
2014/02/04 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
《开国大典》教学反思
2014/04/19 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
欧元符号 €
2022/02/17 杂记
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS