本文最后更新于2022年6月1日，已超过 1 年没有更新，如果文章内容失效，请 反馈 给我们，谢谢！
在网页中有许多人性化的地方比如点击一个按钮或者一个图标可以自动定位到网页中的某一个地方，不用在整个网页中寻找达到快速导航的效果，许多被用在留言、导航、评论等功能处。
第一步：在首页head地方引用“jquery.min.js”；
- <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
第二步：随便找个位置加入以下运行函数；
- <script language="javascript" type="text/javascript">
- function movetomsg() {
- $("html,body").animate({ scrollTop: $("#replyBox").offset().top },3000);//定位到replyBox处，速度为3000
- }
- </script>
第三步：在需要被定位的位置加入一个ID；
- <div id="replyBox">定位到这里</div>
第四步：添加一个按钮以达到鼠标点击这个按钮的时候函数被运行进而定位到相应位置（下面二种参考）；
- <a href='javascript:movetomsg();'>按钮</a> <br>
- <img onclick="movetomsg()" src="anniu.png"/>
完整代码示例：
- <html>
- <head>
- <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
- </head>
- <body>
- <img src="bg.jpg" />
- <div id="replyBox">定位到这里</div>
- <img src="bg.jpg" /> <br>
- <a href='javascript:movetomsg();'>按钮</a> <br>
- <img onclick="movetomsg()" src="anniu.png"/>
- <script language="javascript" type="text/javascript">
- function movetomsg() {
- $("html,body").animate({ scrollTop: $("#replyBox").offset().top },3000);//定位到replyBox处，速度为3000
- }
- </script>
- </body>
- </html>
版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA 协议进行授权 , 转载请注明 出处！
