在線DEMO:傳送門
HTML代碼(放在頁面任意位置,並用CSS美化):
. 代碼如下:<p id="back-to-top"><a href="#top"><span></span>回到頂部</a></p>
JS代碼:. 代碼如下:
<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
//首先將#back-to-top隱藏
$("#back-to-top").hide();
//當滾動條的位置處於距頂部100像素以下時,跳轉鏈接出現,否則消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
} else {
$("#back-to-top").fadeOut(1500);
}
});
//當點擊跳轉鏈接後,回到頁面頂部位置
$("#back-to-top").click(function() {
$('body,html').animate({
scrollTop: 0
},
1000);
return false;
});
});
});
</script>