首先要里了解一下几个知识

$(window).scrollTop() ---滚动条距顶部距离

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。详细可参考：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>

.top

{

background: url("img/a.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

bottom: 32px;

display: block;

height: 58px;

position: fixed;

right: 18px;

width: 58px;

}

$(document).ready(function () {

//首先将#back-to-top隐藏

$("#back-to-top").hide();

//当滚动条的位置处于距顶部10像素以下时，跳转链接出现，否则消失

$(function () {

$(window).scroll(function () {

if ($(window).scrollTop() > 10) {

$("#back-to-top").fadeIn(1000);//淡入显示

}

else {

$("#back-to-top").fadeOut(1000);//淡出隐藏

}

});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function () {

$('body,html').animate({ scrollTop: 0 }, 300);

return false;

});

});

});

利用jQuery实现返回顶部效果

。。。。。。(很多内容,可以滚动)