jquery页内锚点平滑跳转实现代码

html中设置锚点定位的几种常见方法

在html中设置锚点定位我知道的有几种方法,使用id定位、使用name定位、使用js定位,这些方法大家可以参考下

1、使用id定位:

<a href="#1F" name="1F">锚点1</a> 
<div name="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</div> 

这样的定位可以针对任何标签来定位。

2、使用name定位:

<a href="#5F">锚点5</a> 
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
<a name="5F">1111111</href> 

使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。

3、使用js定位

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li> 

通过jQuery实现页面内锚点平滑跳转的方法很多,可以通过插件实现,也可以简单的通过animate方法实现,下面介绍比较简单的方法。
代码只有一句话

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 0);
return false;
});

猜你喜欢

转载自blog.csdn.net/sunshine940326/article/details/55267662