JQ實現頁面置頂button消失效果1、Head部分內容： <head> <title></title> <link href="Content/Site.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> $(function () { //當滾動條的位置處於距頂部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); //1000代表1秒時間回到頂點 return false; }); }); }); </script> </head> 2、Body部分內容： 這里填充一堆內容，直到出現下拉滾動條。 <p id="back-to-top"><a href="#top"><span></span></a><a name="top">返回頂部</a></p> 3、添加CSS樣式： /*returnTop*/ p#back-to-top { position: fixed; display: none; bottom: 100px; right: 80px; } p#back-to-top a { text-align: center; text-decoration: none; color: #d1d1d1; display: block; width: 64px; /*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/ -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; } p#back-to-top a:hover { /*color:#979797;*/ color: #fff; background-color: #fff; } p#back-to-top a span { background: transparent url(../Images/sprite.png?1202) no-repeat -5px 0px; /*background:transparent url(../Images/sprite.png?1202) no-repeat -25px -290px;*/ border-radius: 6px; display: block; height: 64px; width: 56px; margin-bottom: 5px; /*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/ -moz-transition: background 1s; -webkit-transition: background 1s; -o-transition: background 1s; } #back-to-top a:hover span { background: transparent url(../Images/sprite.png?1202) no-repeat -5px 0px; }