javascript实现网页平滑定位代码实例
本章节分享一段代码实例,它实现了网页内部平滑定位的效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } a { color: #fff; } .menu { position: fixed; bottom: 100px; right: 50px; width: 70px; height: 124px; } .menu ul li { width: 70px; height: 30px; margin-top: 1px; text-align: center; line-height: 30px; color: #fff; background: orange; cursor: pointer; } .menu ul li a { display: block; width: 70px; height: 30px; } .box { margin: 10px auto; width: 980px; height: 580px; padding: 10px; background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); color: #fff; font-size: 200px; text-align: center; line-height: 580px; border: 1px #000 solid; } </style> <script type="text/javascript"> window.onload = function() { backtop(); } function backtop() { var timer = null; var speed = 0; var button = document.getElementById('menu').getElementsByTagName('li'); for (var index = 0; index < button.length; index++) { button[index].index = index } function menu(obj, box) { obj.onclick = function() { clearInterval(timer) var b = document.getElementById(box); timer = setInterval(function() { //元素距离顶部距离 var otop = b.offsetTop //滚动条滚动距离 var stop = document.documentElement.scrollTop || document.body.scrollTop; var ss = otop - stop; //alert(ss); var speed = (ss - 10) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); document.documentElement.scrollTop = document.body.scrollTop = stop + speed; if (ss == 10 && speed == 0) { clearInterval(timer); } }, 30) } } menu(button[0], 'a'); menu(button[1], 'b'); menu(button[2], 'c'); menu(button[3], 'd'); button[4].onclick = function() { clearInterval(timer); timer = setInterval(function() { var sTop = document.documentElement.scrollTop || document.body.scrollTop; var speed = Math.floor(-sTop / 5); document.documentElement.scrollTop = document.body.scrollTop = sTop + speed; if (sTop == 0) { clearInterval(timer); } }, 30) } } </script> </head> <body> <div class="menu" id="menu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>返回顶部</li> </ul> </div> <div class="box">平滑跳转</div> <div class="box" id="a">1</div> <div class="box" id="b">2</div> <div class="box" id="c">3</div> <div class="box" id="d">4</div> <div class="box"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function() {
backtop();
}当文档内容完全加载完毕再去执行函数中的代码。
(2).function backtop() {},此函数实现了定位功能。
(3).var timer = null,声明一个变量并赋初值为null,用来存储定时器函数的标识。
(4).var speed = 0,声明一个变量并赋初值为0,用来存储运动速度。
(5).var button = document.getElementById('menu').getElementsByTagName('li'),获取li元素集合。
(6).for (var index = 0; index < button.length; index++) {
button[index].index = index
},通过for循环为每一个li元素创建一个自定义的index属性,并赋值为当前循环的index值。
(7).function menu(obj, box) {},此函数可以为指定的按钮(也就是li元素)注册事件处理函数,点击可以实现定位。
参数obj是要注册事件处理函数的按钮对象,第二个是id属性值。
(8).obj.onclick = function() {},注册事件处理函数。
(9).clearInterval(timer),停止当前定时器函数的执行,防止由于多次连续点击定位按钮,造成定时器函数叠加执行的现象。
(10).var b = document.getElementById(box),获取元素对象,其实也就是定位的目标元素对象。
(11).timer = setInterval(function() {},30),每隔30毫秒执行一次回调函数,这样就实现了动画方式定位效果。
(12).var otop = b.offsetTop,获取元素距离顶部的距离。
(13).var stop = document.documentElement.scrollTop || document.body.scrollTop,向上滚动的距离。
(14).var ss = otop - stop,获取距离差,也就是距离目的元素的尺寸。
(15).var speed = (ss - 10) / 10,获取移动的速度,也就是定时器函数每次执行滚动的尺寸。
(16).speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed),对速度进行上摄入和下舍入,如此多次反复的运算,最终speed速度就可以趋于0。(17).document.documentElement.scrollTop = document.body.scrollTop = stop + speed,设置向上滚动的尺寸。
(18).if (ss == 10 && speed == 0) {
clearInterval(timer);
},如果到达目标元素,那么就停止定时器函数的执行。
(19).button[4].onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.floor(-sTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = sTop + speed;
if (sTop == 0) {
clearInterval(timer);
}
}, 30)
},点击按钮返回顶部,原理和上面的定位大同小异。
二.相关阅读:
(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).clearInterval()可以参阅clearInterval() 一章节。
(3).scrollTop可以参阅js scrollTop一章节。
(4).offsetTop可以参阅js offsetTop一章节。
(5).Math.ceil()可以参阅javascript Math.ceil()一章节。
(6).Math.floor()可以参阅javascript Math.floor()一章节。
javascript实现网页平滑定位代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript实现网页平滑定位代码实例就介绍到这了。
javascript实现网页平滑定位代码实例属于前端实例代码,有关更多实例代码大家可以查看。
