scrollIntoView实现HTML锚点定位

最新推荐文章于 2024-02-06 15:18:05 发布

bbkkkk

最新推荐文章于 2024-02-06 15:18:05 发布

阅读量199

点赞数

分类专栏：全栈之路-前端文章标签： html firefox safari

本文链接：https://blog.csdn.net/bbkkkk/article/details/130365490

版权

全栈之路-前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果滚动页面也是DOM为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平，例如：

//让元素可见

document.forms[0].scrollIntoView();当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也会导致浏览器滚动显示获得焦点的元素。

支持该方法的浏览器有 IE、Firefox、Safari和Opera。

<html>
  <head>
    <title>HTML锚点定位</title>
    <meta charset="utf-8" />
    <style type="text/css">
      #myDiv {
        height: 900px;
        background-color: gray;
      }
      #anchor_top {
        height: 900px;
        background-color: green;
        color: #fff;
        font-size: 50px;
        position: relative;
      }
      #bottom {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
      }
    </style>
    <script>
      window.onload = function () {
        document.querySelector("#anchor1").onclick = function () {
          document.querySelector("#anchor_top").scrollIntoView(false);
        };
        document.querySelector("#anchor2").onclick = function () {
          document.querySelector("#anchor_top").scrollIntoView(true);
        };
      };
    </script>
  </head>
  <body>
    <button id="roll1">scrollIntoView(false)</button>
    <button id="roll2">scrollIntoView(true)</button>
    <div id="myDiv"></div>
    <div id="roll_top">
      scrollIntoView(true)元素上边框与视窗顶部齐平
      <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
    </div>
  </body>
</html>

bbkkkk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
scrollIntoView实现HTML锚点定位

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。实际上，为某个元素设置焦点也会导致浏览器滚动显示获得焦点的元素。如果滚动页面也是DOM为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
复制链接

扫一扫