阻尼运动——指受外力影响，导致运动速度越来越小的运动。
一、阻尼运动之快速返回顶部
当我们需要有阻尼的返回顶部时，每次缩短的距离不是固定值，而是越来越小，即“每次缩短量越来越小”。那我们可以建立一个循环，每次都获取距离顶部的值，然后乘以一个系数，得到的值作为被减数去缩短距离。
因为返回顶部的过程中，距离顶部的值是越来越小的，所以每次减去的值也是越来越小的，所以可以达到阻尼运动的效果。如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>阻尼运动之返回顶部</title>
<style>
body {
height: 2000px;
}
#gotop {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #666;
text-align: center;
line-height: 60px;
}
</style>
<body>
<div id="gotop">TOP</div>
<script>
function goTop(){
clearInterval(window.timer);
var ev = document.getElementsByTagName("body")[0];
var Cur = ev.scrollTop;
timer = setInterval(function(){
ev.scrollTop += ( 0 - ev.scrollTop ) / 40;
if(ev.scrollTop == 0){
clearInterval(timer);
}
});
}
document.getElementById("gotop").onclick = goTop;
</script>
</body>
</html>
二、阻尼运动之阻尼震荡
阻尼震荡的运动过程是：在往目标位置的运动过程中，位移量（速度）是越来越大的，在运动到目标位置时，位移量达到了最大值，并且继续移动；在离开目标位置的过程中，位移量逐渐减小，在最远处，位移量为0。以此数学模型建立如下函数：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>阻尼运动之阻尼震荡</title>
<style>
body {
margin: 0;
}
#bar {
position: relative;
width: 550px;
list-style: none;
margin: 20% auto;
padding: 0;
overflow: auto;
}
#bar li {
float: left;
width: 100px;
height: 20px;
background-color: #ddd;
margin-right: 10px;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 20px;
background-color: #aaa;
margin-right: 10px;
}
</style>
</head>
<body>
<ul id="bar">
<span id="mask"></span>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
function moveTo(ev, tg){
clearInterval(window.timerM);
var step = 0;
timerM = setInterval(function(){
step += (tg.offsetLeft - ev.offsetLeft) / 4;
step *= 0.8;
ev.style.left = ev.offsetLeft + step + "px";
if(Math.abs(step) <= 1 && Math.abs(tg.offsetLeft-ev.offsetLeft) <= 1){
clearInterval(timerM)
}
}, 10);
}
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onmouseover = function(ev){
moveTo(document.getElementById("mask"), ev.target);
}
}
</script>
</body>
</html>
以上为阻尼运动的个人实例。