返回顶部也是一个常见的效果，主要是在浏览较长的网页是，方便用户快速的回到顶部。
首先是一个有滚动效果的长网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; border: none; } body { background-color: #ccc; } p { margin-bottom: 20px; text-align: center; } #top { width: 43px; height: 43px; background: url("images/top.png") no-repeat; background-size: 100% 100%; position: fixed; right: 10px; bottom: 30px; display: none; } </style> </head> <body> <span id="top"></span> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> <p>今天天气很好!</p> </body> </html>
在上面的页面结构中，我们用span元素添加了一个返回顶部按钮，因为在默认的初始化效果中，浏览器是置顶的，所以该按钮是隐藏的。
接下来分析要实现的返回顶部效果。
要实现这个效果，需要分三步：
- 返回顶部的按钮的显示与隐藏
- 返回顶部的效果：卷起的高度为0，
- 动画效果
常见的网页会设置，当网页卷起一定的高度时，才出现返回顶部的按钮，这里只是为了展示效果，所有定义为只要出现了滚动，就显示返回顶部按钮。
window.onscroll = function () {
scroll_top = scroll().top;
scroll_top > 0 ? show($('top')) : hide($('top'));
};
返回顶部的起始效果是卷起高度的值，结束效果是卷起高度为0，在这个变化过程中，添加动画
var scroll_top = 0, begin = 0, end = 0, timer = null;
begin = scroll_top;
$("top").onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
begin = begin + (end - begin) / 20;
window.scrollTo(0, begin);
if(Math.round(begin) === end){
clearInterval(timer);
}
}, 20);
}
完整详细代码下载：点这里