html 页面内锚点定位及跳转方法总结

  • 2018-03-13
  • 0
  • 0

第一种方法:

也是最简单的方法是锚点用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的srollIntoView方法,直接用:
document.getElementById(“divId”).scrollIntoView();

比如:

document.querySelector("#roll1").onclick = function(){  
  document.querySelector("#roll1_top").scrollIntoView(true);  
}  

这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的

评论

还没有任何评论,你来说两句吧