点击标题滚动到指定位置

当我们想要点击页面某个元素让其滚动到指定位置时，我们可以时用的方法有很多；比较直接一点的是使用a标签自带的锚点，如下所示，但是这样进行跳转页面显示的效果会比较生硬；

a标签示例：

<template>
  <div>
    <a href="#test">显示文本</a>
    <div style="height:2000px"> </div>

    <div>
      <h2 id="test">这是一个标题</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur officia         sapiente delectus libero odio, dicta ipsum sunt eveniet molestias dolore sint, modi suscipit, dignissimos consequuntur autem repudiandae illum quidem sequi?</p>
    </div>

    <div style="height:2000px"> </div>
  </div>
</template>

所以我们可以使用scrollIntoView() 方法，该方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

scrollIntoView() 方法示例：

<template>
  <div>
    <div @click="showNode">显示文本</div>
    <div style="height:2000px"> </div>
    <div id="text_node">
      <h2 id="test">这是一个标题</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur officia sapiente delectus libero odio, dicta ipsum sunt eveniet molestias dolore sint, modi suscipit, dignissimos consequuntur autem repudiandae illum quidem sequi?</p>
    </div>
    <div style="height:2000px"> </div>
  </div>
</template>

<script>
export default {
  methods: {
    showNode() {
      document.getElementById('text_node').scrollIntoView() // 默认滚动至节点置顶
      document.getElementById('text_node').scrollIntoView(false) // 默认滚动至节点显示
      document.getElementById('text_node').scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); // 见下文
    }
  }
}
</script>

scrollIntoView() 方法的使用

scrollIntoView([alignToTop,scrollIntoViewOptions ]) 方法可以携带最多两个参数；

 alignToTop 可选

      如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。这是这个参数的默认值。

      如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。

 scrollIntoViewOptions 可选

      behavior 可选

            定义动画过渡效果，auto 或 smooth 之一。默认为 auto。

      block 可选

            定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。

      inline 可选

            定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

总结：

        scrollIntoView() 方法不仅可以控制显示位置，还能设置滚动过度时的动画效果，会有比较好的用户体验。