Jquery点击锚点链接实现滑动跳转

发布时间:2020-01-20编辑:脚本学堂
有关jquery实现锚点链接滑动跳转页面的一段代码,单击锚点链接可以滑动到任意地方,不了解的朋友参考下。

代码:
 

复制代码 代码示例:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>点击锚点链接实现滑动跳转 - www.plcxue.com</title>
<styletype="text/css">
a{display:block;width:500px;height:30px;background:#cd1234;margin-top:15px;color:white;text-indent:10px;font-size:16px;font-weight:bold;padding-top:10px;text-decoration:none;}
a:hover{text-decoration:line-through;}
.s{width:500px;height:500px;margin-top:16px;background:#F90;}
</style>
</head>
<bodyid="top">
<ahref="#aa"class="scroll">单击我会滑动哦~~</a>
<divid="aa"class="s"></div>
<ahref="#bb"class="scroll">单击我会滑动哦~~</a>
<divid="bb"class="s"></div>
<ahref="#top"class="scroll">单击我会滑动到顶部哦~~</a>
<divid="cc"class="s"></div>
<ahref="hrrp://www.plcxue.com/"target="_blank">www.plcxue.com</a>
<scriptsrc="/jquery-latest.js"></script>
<scripttype="text/javascript">
$(function(){
$('a.scroll').click(function(){
vartarget=$(this.hash);
varhash=this.hash;
//$target=$target.length&&$target
//||$('[name='+this.hash.slice(1)+']');
if(target.length){
vartargetOffset=target.offset().top;
$('html,body').animate({scrollTop:targetOffset},600);
returnfalse;
}
});

});
</script>
</body>
</html>