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

米柆

已于 2023-09-25 14:53:34 修改

阅读量2.4k

点赞数

分类专栏： Millia's work 文章标签： vue.js 前端 javascript

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

本文链接：https://blog.csdn.net/millia/article/details/126367571

版权

Millia's work 专栏收录该内容

53 篇文章 4 订阅

订阅专栏

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

单锚点跳转：

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>