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