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; 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; 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; }