Vue：页面内跳转锚点的使用

原创已于 2023-09-25 14:53:34 修改 · 2.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-16 15:43:19 首次发布

Millia‘s work 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现单个及多个锚点在页面内的跳转，通过`scrollIntoView`方法平滑滚动到目标位置。示例中展示了点击导航链接在当前页面内跳转到不同内容区域的实现方式，包括活动规则、奖励和介绍等不同锚点，同时优化了滚动行为，使得滚动更加流畅。

点击文字跳转当前页的某一个位置，或点击导航在当前页内多个位置跳转。

单锚点跳转：

HTML：

<ul class="btGroup">

<!--其他HTML结构-->

<li @click="goRule('Rule')">活动规则</li>

<!--其他HTML结构-->


</ul>
<div class="millia intro f14 lh26" id="Rule">
<!--id="Rule"要与goRule()方法的参数一致-->

<!--其他HTML结构-->


</div>

JS:

methods: {
  //锚点跳转
  goRule(event) {
    var ID = "#" + event;
    //document.getElementById(ID).scrollIntoView({
    document.querySelector(ID).scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "nearest",
    });
  },
}

多锚点跳转：

<template>
<div id="millia">

<!--其他HTML结构-->

<ul class="btGroup">
<li @click="goRule('Rule')">规则</li>
<li @click="goRule('Info')">奖励</li>
<li @click="goRule('Intro')">介绍</li>
</ul>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="millia intro f14 lh26" id="Rule">
活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="millia intro f14 lh26" id="Info">
奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励奖励
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="millia intro f14 lh26" id="Intro">
活动介绍活动介绍活动介绍活动介绍活动介绍
</div>

<!--其他HTML结构-->

</div>
</template>
<script>
export default {
  name: 'index',
  data(){
    return{

    }
  },
  methods:{
    //锚点跳转
    goRule(event) {
      var ID = "#" + event;
      //document.querySelector(ID).scrollIntoView({
        document.getElementById(ID).scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "nearest",
      });
    },
  },
}
</script>
<style scoped>

</style>