注：jQuery代码，需要jQuery库才能运行
| 代码如下 | 复制代码 |
| $(function(){ $('a[href*=#]').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); }); |
|
加了此段代码之后就能实现平滑滚动了。当然，如果需要像淘宝商品页面那样，在顶部的时候隐藏链接，拉下去的时候就出来的话，可以自行对此代码进行改造。
一个返回顶部代码
| 代码如下 | 复制代码 |
|
<!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> <title>点击平滑滚动“返回顶部”的效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> *{padding:0;margin:0;} html{text-overflow:ellipsis;} body{background:#eee;} ul,li{list-style:none;} #wrap{width:1002px;margin:0 auto;position:relative;background:#ddd;} #scrolltop{display:none;position:fixed;bottom:10px;left:50%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));margin-left:501px;width:16px;border-radius:3px;font-size:14px;text-align:center;color:#080;cursor:pointer;padding:1px;background:#fff;} #arrow{width:16px;height:12px;font-size:16px;font-weight:bold;overflow:hidden;} #backwords{font-size:13px;padding-top:4px;} </style> <script type="text/javascript" src="/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ //判断滚动条距离上面的高度是否为0来判断是否显示返回头部模块 $(window).scroll(function(){ var top=$(window).scrollTop(); if(top>0){ $("#scrolltop").fadeIn("slow"); }else{ $("#scrolltop").fadeOut("slow"); } }); //点击返回头部效果 $("#scrolltop").click(function(){ $("html,body").animate({ scrollTop:0}); }); }); </script> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="wrap"> <div id="scrolltop"> <div id="arrow">▲</div> <div id="backwords">返回顶部</div> </div> <div style="height:2000px;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</div> </div> </body> </html> |
|
时间： 2024-10-03 19:14:14