js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图。
（实现楼层间的跳跃，主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上。）
说楼层跳跃前，先温习下，一般网页在高度较大时，都会在页面的底部位置放个放回顶部的按钮或图片，一点击便有如做火箭般瞬间回到页面的顶部（说时迟，那时快，一句 btn.onclick = function(）{window.scrollTo(0,0)} 就搞定了）。
但是这种瞬间就回到顶部的效果，略显突然，不符合人体工程学，如果要先快后慢，如坐电梯一般回到顶部，该如何实现呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#but{
position:fixed;
bottom:20px;
right:20px;
display:none;
}
</style>
</head>
<body>
<button id="but">返回顶部</button>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<!--省略若干个 -->
</body>
<script>
var weizhi = 0;
var timer = null;
var target = 0;
var but = document.getElementById("but"); window.onscroll = function(){
weizhi = scroll().top;
if(weizhi>1000){
but.style.display = "block";
}else{
but.style.display = "none";
}
} but.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var step = Math.floor((target - weizhi)/10);
weizhi = weizhi + step;
window.scrollTo(0,weizhi);
if(weizhi == 0){
clearInterval(timer);
}
},30);
}
function scroll(){
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</html>
如何缓动，第一次移动的距离大点，之后依次递减，整体上给人的感觉就是移动先是很快，然后逐渐变慢。
var step = Math.floor((target - weizhi)/10);
设置步长，因为目标是回到顶部，所以target的值为0。两者间距离的十分之一作为步长。
weizhi = weizhi + step;
每一次当前的位置都加上了步长，（这里step为负数），所以当前位置就会越来越接近顶部。
了解了底部缓动返回顶部，楼层间的跳跃道理是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
body,html{
height:100%;
}
ul{
height:100%;
}
ul li{
height:100%;
}
ol{
position:fixed;
top:100px;
left:30px;
}
ol li{
width:50px;
height:30px;
border:1px solid #aaa;
margin-top:10px;
line-height:30px;
text-align:center;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ul>
<ol>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ol>
</body>
<script>
var timer;
var target;
var leader=0;
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLi = ul.children;
var olLi = ol.children;
var arrColor = ["pink","blue","green","red","yellow"];
for(var i=0;i<ulLi.length;i++){
ulLi[i].style.background = arrColor[i];
olLi[i].style.background = arrColor[i];
olLi[i].index = i; //重点，为元素增加一个index属性，之后再点击时，可以通过获取这个属性来判断是点击了那个li元素
olLi[i].onclick = function(){
clearInterval(timer);
target = ulLi[this.index].offsetTop; //通过ol中的li元素的index属性判断对应的ul的li元素距离顶部的距离。
timer = setInterval(function(){
var step = (target - leader) / 10 ;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
window.scrollTo(0,leader);
if(Math.abs(target - leader) <= Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},30);
}
}
window.onscroll=function(){
leader = scroll().top;
} function scroll(){
//将获取scrollTop和scrollLeft的属性进行封装
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
} </script>
</html>
js网页返回顶部和楼层跳跃的实现原理的更多相关文章
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- 基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- javascript实现网页返回顶部功能
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...
- 网页返回顶部之animate方法
点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...
随机推荐
- itextpdf添加非自带字体（例如微软雅黑）
找到需要的字体,例如 在windows系统中找到需要字体,本例使用微软雅黑,使用C:\\Windows\\Fonts\\msyh.ttf. 代码如下: /** * 创建pdf,使用微软雅黑字体 * * ...
- Epplus：导出Excel
看到其它大神的Epplus导出Excel,结合写出符合自己需求的将导出数据到Excel,给其它人参考一下,也可以学习http://www.cnblogs.com/caofangsheng/p/6149 ...
- css自动添加浏览器兼容前缀 autoprefixer设置
Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...
- web.xml文件--编码注意事项
写在前面: 最近发布项目的时候,要修改web.xml文件的内容,然后我在本机的web.xml文件中是有注释的,但是到了服务器上面,就说编码不同.我也没有怎么注意.就继续启动服务器,但是访问网站,一直报 ...
- 封装一个button上带图片的，图片在上，文字在下的按钮
#import "CJShoppingDetailButton.h" @implementation CJShoppingDetailButton - (void)layoutSu ...
- 【adb】连接BlueStacks
1.在任务管理器中找到
- 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern
public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...
- 命令行执行php脚本 中$argv和$argc
在实际工作中有可能会碰到需要在nginx命令行执行php脚本的时候,当然你可以去配置一个conf用外网访问. 在nginx命令行中 使用 php index.php 就可以执行这个index.php脚 ...
- sed使用范例
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/32 记录下sed编译器的常见使用方法. sed编辑器基于输入到命 ...
- StreamCQL编写jstorm拓扑任务入门
一,什么是 StreamCQL StreamCQL(Stream Continuous Query Language)是一个类似SQL的声明式语言, 目的是在流计算平台(目前也就是jstrom)的基础 ...