| 代码如下 | 复制代码 |
|
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="quicksand,jquery插件" /> <meta name="description" content="shuro's blog演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> <title>用jQuery实现最人性化的返回顶部跳转效果</title> <link rel="stylesheet" type="text/css" href="../Css/main.css" /> <style type="text/css"> #container{width:850px; margin:10px auto; padding:20px; background:#fff; color:#333} #container h3{font:bold 16px Arial, Helvetica, sans-serif; text-transform:uppercase; margin:0 0 10px; color:#006699; text-align:center;} #back-to-top{position:fixed;bottom:100px;left:60px;} #back-to-top a{text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:80px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } #back-to-top a:hover{color:#979797;} #back-to-top a span{background:#d1d1d1; border-radius:6px; display:block; height:80px; width:80px; background:#d1d1d1 url(images/arrow-up.png) no-repeat center center; margin-bottom:5px; -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s;} #back-to-top a:hover span{background:#979797 url(Images/arrow-up.png) no-repeat center center;} </style> <script type="text/javascript" src="../Script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部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); return false; }); }); }); </script> </head> <body id="top"> <div id="header"> <div id="logo"> </div> </div> <div id="main"> <div id="container"> <p id="back-to-top" style="display: none; "><a href="#top"><span></span>回到顶部</a></p> </div> </body> |
|
时间： 2024-09-20 16:46:29