有时候，博客文章太长，需要返回顶部时，需要用鼠标拖着滚动条向上好半天，这里提供一个用 jQuery 来实现的动态上滚的示例。这个示例完全参考和翻译自 webdesignerwall 的 blog：http://webdesignerwall.com/tutorials/animated-scroll-to-top，其中有部分删改，并在本人的 blog 上实现。
主要包含HTML和CSS的设计，基于jQuery的JS的设计。另外还有一点小trick
Design & CSS
相关的 HTML 代码很简单，在source/_include/custom/footer.html中添加如下代码：
<p id = "back-top">
<a href="#top"><span></span>Back to Top</a>
</p>
对应的 CSS 样式的设置如下：（这段代码同样的放在source/_include/custom/footer.html文件中）
<style type="text/css">
#back-top {
position: fixed;
bottom: 50px;
right: 100px;
}
#back-top a {
width: 80px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 80px;
height: 80px;
display: block;
margin-bottom: 7px;
background: #ddd url(../../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
/*
#back-top a:hover span {
background-color: #888;
}
*/
</style>
上面的 css 中用到了一张图片up-arrow.png，放在source/images/目录下，图片如下：
这是从google image里面随便找的一个，你也可以找一个自己喜欢的图片。
jQuery部分
HTML 和 CSS 样式设置好了之后，最后就是添加 JavaScript 事件响应代码了，这里是基于 jQuery 实现的。代码如下：（这段代码还是放在source/_include/custom/footer.html文件中）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
一个Trick
在上面的HTML代码中，我们将一个链接添加到了ID为 #top 的里面，这个 #top 标签是 <body> 标签的ID，这样即使浏览器不支持相关的JS，通过这个link也实现了返回顶部的功能。