html页面
<div id="backtop"><a href="javascript:void(0)">返回顶部</a></div>
/*javascript:void(0) 意思是指禁止a标签刷新页面*/
css样式(自行添加)
<style>
#backtop a { /* back to top button */
position: fixed;
bottom: 50px; /* 小按钮到浏览器底边的距离 */
right: 275px; /* 小按钮到浏览器右边框的距离 */
color: #f8f8f8; /* 小按钮中文字的颜色 */
z-index: 1000;
background: #4a77e7; /* 小按钮底色 */
padding: 10px; /* 小按钮中文字到按钮边缘的距离 */
border-radius: 10px; /* 小按钮圆角的弯曲程度（半径）*/
-moz-border-radius: 4px;
-webkit-border-radius: 8px;
font-weight: normal; /* 小按钮中文字的粗细 */
text-decoration: none !important;
}
#backtop a:hover { /* 小按钮上有鼠标悬停时 */
background: #31b0d5; /* 小按钮的底色 */
color: greenyellow; /* 文字颜色 */
}
</style>
JavaScript脚本
<script>
// var scrollHeight = $(document).height(); 获取页面高度
$(function(){
$("#backtop").eq(0).click(function(){
$("html,body").animate({scrollTop :0}, 300);
// $("html,body").animate({scrollTop :scrollHeight }, 300); 滚动到底部
return false;
});
});
</script>
