Vue项目通过scrollIntoView实现锚点点击页面平滑滚动

实现方式

element.scrollIntoView();

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

实现代码

goAnchor(selector) {
  this.$el.querySelector(selector).scrollIntoView({
      behavior: "smooth",  // 平滑过渡
      block:    "start"  // 上边框与视窗顶部平齐。默认值
  });
}

参数

  • behavior: 定义动画过渡效果,auto 或 smooth 之一。默认为 auto。
  • block:可选,定义垂直方向的对齐,start、center、end 或 nearest 之一。默认为 start。
  • inline: 可选,定义水平方向的对齐,start、center、end 或 nearest 之一。默认为 nearest。

完整示例代码

<template>
  <div class="main">
    <!-- 菜单 -->
    <div class="nav">
      <a href="javascript:" @click="goAnchor('#Java')">Java</a>
      <a href="javascript:" @click="goAnchor('#Python')">Python</a>
      <a href="javascript:" @click="goAnchor('#Javascript')">Javascript</a>
    </div>

    <!-- 内容 -->
    <div class="item">
      <div class="title" id="Java">Java</div>
      <div class="content"></div>
    </div>

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

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

</template>

<script>
export default {
  methods: {
    // 标签滚动
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
          behavior: "smooth",  // 平滑过渡
          block:    "start"  // 上边框与视窗顶部平齐。默认值
      });
    }
  }
};
</script>

<style scoped>
.main {
  width: 600px;
  margin: 0 auto;
  margin-top: 20px;
}

.nav a {
  text-decoration: none;
  color: #333;
  padding: 0 10px;
  margin: 0 5px;
  background: #9e9e9e;
  line-height: 2;
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item{
    margin-top: 20px;
}

.title{
    background: #9e9e9e;
    line-height: 2;
}
.content {
  height: 300px;
  background: #eeeeee;
}
</style>

在这里插入图片描述

问题

1、要获取的节点不在当前组件内,没有ref 引用,可以直接获取全局的节点,使用document

document.querySelector(selector).scrollIntoView({
      behavior: "smooth",  // 平滑过渡
      block:    "start"  // 上边框与视窗顶部平齐。默认值
  });

2、如果在循环列表,或多个子节点中使用id选择器要注意,id不能重复,可以使用uuid给每个元素分配一个唯一id。

import { v4 as uuidv4 } from 'uuid';

console.log(uuidv4());
// 92b8a6bd-f1fd-4b52-b8a0-6178a0e76828

具体使用方式见: Node.js:创建一个随机的UUID

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值