JQuery插件开发-----------------------------------返回顶部
要实现一些论坛 SNS网站 之类的返回顶部的功能 其实比较简单 我们可以在屏幕右下角使用 fix的定位来指定它的位置不动
当屏幕滚动>某一值的时候让它出现即可 点击执行 $('body,html').animate({scrollTop:0},1000);即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery返回顶部</title> <style type="text/css"> body{ margin: 0 auto; } #text{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width: 300px; } /*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:80px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:60px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition:color 0.5s; -webkit-transition:color 0.5s; -o-transition:color 0.5s; } p#back-to-top a:hover{ color:#979797; } p#back-to-top a span{ background:url(top.gif) no-repeat -51px 0; border-radius:6px; display:block; width: 60px; height: 60px; margin-bottom:5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ -moz-transition:background 0.2s; -webkit-transition:background 0.2s; -o-transition:background 0.2s; } #back-to-top a:hover span{ background:url(top.gif) no-repeat -113px 0; } </style> <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()>400){ $("#back-to-top").fadeIn(1000); } else { $("#back-to-top").fadeOut(1000); } }); //当点击跳转链接后，回到页面顶部位置 $("#back-to-top").click(function(){ //注意scrollTop 到0即可 $('body,html').animate({scrollTop:0},1000); return false; }); }); }); </script> </head> <body> <div id="bq" style="height:3000px;background:#444"> <div id="text">Designed By BaiQiang</div> </div> <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> </body> </html>
