效果图:
跳转页面 定位到某个位置 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)
注 意 : 这 行 代 码 一 定 要 写 在 m o u n t e d 方 法 里 面 或 者 执 行 完 m o u n t e d 之 后 的 方 法 里 面 , 一 定 要 使 用 n e x t T i c k 或 者 s e t T i m e o u t \color{red}{注意:这行代码一定要写在mounted方法里面或者执行完mounted之后的方法里面,一定要使用nextTick或者setTimeout} mountedmounted使nextTicksetTimeout

锚点滚动效果图:

锚点滚动

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一致
Logo

前往低代码交流专区

更多推荐