使用scrollIntoView进行锚点定位效果

不知道你有没有遇到这样的需求：锚点定位？进入页面某个元素需要出现在可视区？...这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴，实现的方式有各种各样的，比如使用 scrollTop、监听滚动等等，这也是很多小伙伴第一个想到的。今天我们介绍一种更简单的方式：scrollIntoView。

项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href="#锚点"，然后要跳的锚点给个id="锚点"，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里我总结4个跳转锚点的方法。

a标签进行定位

也是最简单的方法是锚点用标签，在href属性中写入div的id

javascript 复制代码

<style>  
    div {  
        height: 800px;  
        width: 400px;  
        border: 2px solid black;  
    }  
    h2 {  
        position: fixed;  
        margin:50px 500px;  
    }  
</style>  
  
  
<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>

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

js事件

javascript 复制代码

window.location.hash="divId"

跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦

利用animate属性

是用animate属性，当点击锚点后，页面滚动到相应的DIV。

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;
    });
});
代码我没验证这段来自-》》》》》
作者：Flutter错误集
链接：https://juejin.cn/post/6908965295109603335
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

srollIntoView方法

scrollIntoView 是 HTMLElement 集合下的一个 API，每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样：滚动到可视区。为了更加官方一点，我们还是先来看看官方的解释。
官方解释：Element 接口的 scrollIntoView()方法会滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见。
官方的解释还是比较好理解的，我们摘要几个关键词出来：
• Element 接口
• 滚动
• 可见
从上我们大致也能理解，无非就是让某一个元素对用户可见，但是为了更准确又通俗一点，我们用自己的话简单概述一遍。
scrollIntoView()是 HTML 元素的一个方法，假如我们有一个元素容器出现了滚动条，有滚动条必然就有一些元素是不可见的，为了让隐藏的元素可见，我们可以手动滚动滚动条，让元素出现，另一种方法就是调用隐藏元素的 scrollIntoView 方法，让它自动滚动到可视区内。

javascript 复制代码

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

javascript 复制代码

参数解释：
• alignToTop：它是一个 Boolean 值，它用来规定元素出现在可视区后与可视区的对齐方式，为 true 代表顶端对齐，false 代表低端对齐。
• scrollIntoViewOptions：它是一个对象，该参数主要是配置元素的动画效果以及位置的，它有以下 3 个属性：
• behavior：它定义元素出现在可视区内过程的动画，有 auto 和 smooth 两种选择。
• block：定义元素的垂直方向的对齐方式，有"start", "center", "end", 或 "nearest" 4 个选项，默认 start。
• inline：定义元素水平对齐方式，有"start", "center", "end", 或 "nearest"4 个选项，默认"nearest"。
`在这里插入代码片`

javascript 复制代码

注意：
有些小伙伴可能发现两个参数都能定义元素的对齐方式，它们之间有什么联系呢？当 alignToTop 为 true 时，scrollIntoViewOptions: {block: "start", inline: "nearest"}这是它的默认值，当 alignToTop 为 false 时，scrollIntoViewOptions: {block: "end", inline: "nearest"}这是它的默认值。

javascript 复制代码

<html>
    <head>
        <title>HTML5_ScrollInToView方法</title>
        <meta  charset="utf-8">
        <style type="text/css">
            #myDiv{
                /* height:900px; */
                height: 50px;
                background-color:gray;
                overflow-y: scroll;
            }
            #roll_top{
                height:50px;
                background-color:green;
                color:#FFF;
                font-size:20px;
                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 id="roll_top">scrollIntoView(ture)元素上边框与视窗顶部齐平</div> 
          <div id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</div>
        </div>
       
    </body>
    <script>
      window.onload = function(){
    document.querySelector("#roll1").onclick = function(){
        document.querySelector("#roll_top").scrollIntoView(false);
    }
    document.querySelector("#roll2").onclick = function(){
        document.querySelector("#bottom").scrollIntoView(true);
    }
}
    </script>
</html>

如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，

以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()

作为标准方法。

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，

调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么

窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素

会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部

不一定齐平，例如：

//让元素可见

document.forms[0].scrollIntoView();

当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也

会导致浏览器滚动显示获得焦点的元素。

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

4种方法实现html 页面内锚点定位及跳转

使用scrollIntoView进行锚点定位效果

a标签进行定位

js事件

利用animate属性

srollIntoView方法