JQuery 实现返回顶部效果
首先要里了解一下几个知识
$(window).scrollTop() ---滚动条距顶部距离
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。详细可参考：http://www.w3school.com.cn/jquery/effect_animate.asp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="Base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
$(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;
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 style="text-align: center;">利用jQuery实现返回顶部效果</h1>
<div style="width: 800px; height:300px; border: 1px; text-align: left; margin:850px auto;">
。。。。。。(很多内容,可以滚动)
</div>
<a href="#" id="back-to-top" class="top" title="返回顶部"> </a>
</div>
</form>
</body>
</html>
