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

效果图：

html代码：

<div id="member-goods-list-box">
  <div class="member-goods-container">
    <div class="member-goods-label">
      <div class="member-goods-text-one">Primediv>
      <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')">Alisadiv>
      <div @click="goToAnchor('#Cynthia')">Cynthiadiv>
      <div @click="goToAnchor('#Marco')">Marcodiv>
      <div @click="goToAnchor('#William')">Williamdiv>
      <div @click="goToAnchor('#Jorge')">Jorgediv>
    div>


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

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

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

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

    <div class="item">
      <div class="title" id="Jorge">Jorgediv>
      <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一致