jquery特效之页面内链接锚点跳转平滑滚动效果

发布时间:2020-01-06编辑:脚本学堂
一个jquery特效代码,实现页面内链接锚点跳转平滑滚动效果,兼容多个浏览器滑动效果代码,需要的朋友参考下。

测试环境:
ie8、firefox和chrome。

注意:jquery.min.js文件调用。

代码:
 

复制代码 代码示例:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<title>jquery实现锚点跳转平滑滚动效果 - www.osxue.com</title>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/JavaScript">
$(document).ready(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){
vartargetOffset=$target.offset().top;
$('html,body').animate({
scrollTop:targetOffset
},
1000);
returnfalse;
}
}
});
});
</script>
</head>
<body>
<p>0</p>
<pid="top">top</p>
<p><ahref="#bottom">bottom</a></p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<p>0</p>
<pid="bottom">bottom</p>
<p><ahref="#top">top</a></p>
<p>0</p>
</body>
</html>

在Opera浏览器下有些问题,Opera补丁代码:
 

$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');