html 页面内锚点定位及跳转方法总结
项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点,然后你点击给一次后退都是退回上一个选择的锚点url,这里总结一些跳转锚点的方法。
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:
<!DOCTYPE html> <html> <head> <style> div { height: 800px; width: 400px; border: 2px solid black; } h2 { position: fixed; margin:50px 500px; } </style> </head> <body> <h2> <a href="#div1">to div1</a> <a href="#div2">to div2</a> <a href="#div3">to div3</a> </h2> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </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();
比如:
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
这里就是点击id是#roll1的元素可以滚动到id是#roll1_top的地方,这里的#roll1和#roll1_top最好是一一对应的,
这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。代码如下:
<html> <head> <title>HTML5_ScrollInToView方法</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function(){ /* 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法, 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView() 作为标准方法。 scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素, 调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素 会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部 不一定齐平,例如: //让元素可见 document.forms[0].scrollIntoView(); 当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也 会导致浏览器滚动显示获得焦点的元素。 支持该方法的浏览器有 IE、Firefox、Safari和Opera。 */ document.querySelector("#roll1").onclick = function(){ document.querySelector("#roll_top").scrollIntoView(false); } document.querySelector("#roll2").onclick = function(){ document.querySelector("#roll_top").scrollIntoView(true); } } </script> <style type="text/css"> #myDiv{ height:900px; background-color:gray; } #roll_top{ height:900px; background-color:green; color:#FFF; font-size:50px; position:relative; } #bottom{ position:absolute; display:block; left;0;bottom:0; } </style> </head> <body> <button id="roll1">scrollIntoView(false)</button> <button id="roll2">scrollIntoView(true)</button> <div id="myDiv"></div> <div id="roll_top"> scrollIntoView(ture)元素上边框与视窗顶部齐平 <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span> </div> </body> </html>个人建议使用第四种方法。
更多相关文章
- 如何选择两个h2之间的所有元素
- 千呼万唤 HTML 5 (2) - 区块元素
- JQuery选择器和操作得到的元素
- 是否有更快的方法来遍历HTMLDocument中的每一个元素呢?
- Jquery-如何使用prop方法更改backgroundColor?
- 关于 客户端发现响应内容类型为“text/html; charset=utf-8”,但
- 在PHP中获取幕布元素ID的文本[重复]
- HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】
- 使用jQuery随机化一系列div元素