jQuery实现返回顶部功能

整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图

--------------------------------------分割线 --------------------------------------

--------------------------------------分割线 --------------------------------------

第一种实现

一、JSP或HTML(主体结构)

在body中添加

二、CSS(样式化)

图片自己网上找资源

三、jQuery(动态效果)

<script>
$(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
},
500);
return false;
});
});
});