Vue 跳转页面 定位到某个位置 scrollIntoView 锚点滚动

效果图：

html代码：

<!-- Prime专享折扣商品 -->
<div id="member-goods-list-box">
  <div class="member-goods-container">
    <div class="member-goods-label">
      <div class="member-goods-text-one">Prime</div>
      <div class="member-goods-text-two">专享折扣</div>
    </div>
    <div class="member-goods-list">
      <div class="goods-item" v-for="(memberGood, index) in memberGoodsList" :key="index">
        <goods-item></goods-item>
      </div>
    </div>
  </div>
</div>

主要js代码：

async mounted () {
  await this.getGoodsList()
  this.$nextTick(() => {
    document.querySelector("#member-goods-list-box").scrollIntoView(true)
  })
},

document.querySelector("#member-goods-list-box").scrollIntoView(true)
$注意：这行代码一定要写在mounted方法里面或者执行完mounted之后的方法里面，一定要使用nextTick或者setTimeout$

锚点滚动效果图：

Html代码：

<template>
  <div class="member-service-protocol">
    <div class="menu">
      <div @click="goToAnchor('#Alisa')">Alisa</div>
      <div @click="goToAnchor('#Cynthia')">Cynthia</div>
      <div @click="goToAnchor('#Marco')">Marco</div>
      <div @click="goToAnchor('#William')">William</div>
      <div @click="goToAnchor('#Jorge')">Jorge</div>
    </div>


    <div class="item">
      <div class="title" id="Alisa">Alisa</div>
      <div class="content"></div>
    </div>

    <div class="item">
      <div class="title" id="Cynthia">Cynthia</div>
      <div class="content"></div>
    </div>

    <div class="item">
      <div class="title" id="Marco">Marco</div>
      <div class="content"></div>
    </div>

    <div class="item">
      <div class="title" id="William">William</div>
      <div class="content"></div>
    </div>

    <div class="item">
      <div class="title" id="Jorge">Jorge</div>
      <div class="content"></div>
    </div>
  </div>
</template>

js代码：

<script>
export default {
  methods: {
    goToAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start" // 上边框与视窗顶部平齐
      });
    }
  }
}
</script>

css代码：

.member-service-protocol {
  width: 10rem /* 750/75 */;
  margin-top: .266667rem /* 20/75 */;
}
.menu {
  margin-bottom: .266667rem /* 20/75 */;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.menu div {
  text-decoration: none;
  color: #333;
  font-size: .4rem /* 30/75 */;
  padding: 0 .133333rem /* 10/75 */;
  margin: 0 .066667rem /* 5/75 */;
  background: #CDB67D;
}
.title{
  background: #F4D993;
}
.content {
  height: 8rem /* 600/75 */;
  background: #eeeeee;
}

关于scrollIntoView

作用：让当前的元素滚动到浏览器窗口的可视区域内

语法：

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

参数：
alignToTop（可选）：

• 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
• 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

scrollIntoViewOptions（可选）：

{
  behavior: "auto" | "instant" | "smooth", // 默认auto
  block: "start" | "center" | "end" | "nearest", // 默认start
  inline: "start" | "center" | "end" | "nearest", // 默认nearest
}

• behavior：表示滚动的动画过渡效果。instant表示直接滚到底，smooth表示使用平滑滚动
• block：定义垂直方向的对齐。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
• inline：定义水平方向的对齐。参数与block一致