源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1637|回复: 0

[CSS/Html] html 页面内锚点定位及跳转方法总结

[复制链接]

3096

主题

3497

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
269266
发表于 2023-6-6 16:57:45 | 显示全部楼层 |阅读模式

第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. height: 800px;
  7. width: 400px;
  8. border: 2px solid black;
  9. }
  10. h2 {
  11. position: fixed;
  12. margin:50px 500px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h2>
  18. <a href="#div1">to div1</a>
  19. <a href="#div2">to div2</a>
  20. <a href="#div3">to div3</a>
  21. </h2>
  22. <div id="div1">div1</div>
  23. <div id="div2">div2</div>
  24. <div id="div3">div3</div>
  25. </body>
  26. </html>
复制代码


这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。 

第二种方法是在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦。

第三种方法是用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>
注意:运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。   

$("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。
另外,脚本可以进一步优化,自己来试试

这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。

缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。


第四种方法是用js的srollIntoView方法,直接用:
document.getElementById("divId").scrollIntoView();
这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。

推介大家用第四种,我依次试了前三种,都有各种问题。

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 05:22 , Processed in 0.028100 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明