<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery实现页面底部滑动置顶 | alleyloft.com</title> <link type="text/css" rel="stylesheet" href="css/main.css" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ //置顶按钮显示/隐藏实现 $(window).scroll(function(){ var w_height = $(window).height();//浏览器高度 var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 if(scroll_top > w_height){ $("#goto-top").fadeIn(500); }else{ $("#goto-top").fadeOut(500); } }); //置顶 $("#goto-top").click(function(e){ e.preventDefault(); $(document.documentElement).animate({ scrollTop: 0 },200); //支持chrome $(document.body).animate({ scrollTop: 0 },200); }); }) </script> <style type="text/css"> #goto-top { display:none; position:fixed; width:38px; height:36px; background:url(images/goto-top.png) no-repeat 0 0; bottom:40px; right:40px; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; z-index:9999; } #goto-top:hover { background:url(images/goto-top.png) no-repeat 0 -36px; } </style> </head> <body> <div class="header"> <div class="logo"> jQuery实现页面底部滑动置顶 <span>- alleyloft.com</span> </div> </div> <div class="placeholder"></div> <div class="nav"> <div class="ul-box"> <ul class="links"> <li><a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a></li> <li><a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a></li> <li><a href="http://www.alleyloft.com/share" target="_blank">技术分享</a></li> <li><a href="http://www.alleyloft.com/psd" target="_blank">原创PSD作品</a></li> <li><a href="http://www.alleyloft.com/html" target="_blank">静态HTML模板</a></li> <li><a href="http://www.alleyloft.com/photo" target="_blank">个人随拍</a></li> <li><a href="http://www.alleyloft.com/index" target="_blank">音乐欣赏</a></li> <li><a href="http://www.alleyloft.com/aboutme" target="_blank">关于我</a></li> </ul> </div> </div> <div class="con"> <div class="show"> <div class="banner"> <a href="http://www.alleyloft.com/photo" target="_blank"> <img alt="小巷阁楼-alleyloft" title="个人随拍" src="images/banner.jpg" /> </a> </div> <div class="article"> <!--文章内容区--> </div> </div> </div> <a href="#" title="返回顶部" id="goto-top"></a> </body> </html>
时间: 2024-11-05 16:11:56