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实现网页平滑定位代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容