点击导航栏内容，滚动到指定位置

最新推荐文章于 2025-09-07 15:53:47 发布

原创最新推荐文章于 2025-09-07 15:53:47 发布 · 1.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端

demo 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用Vue.js构建的一个响应式网站，通过导航菜单点击事件，实现页面内容平滑滚动到相应部分。主要涉及组件化开发、路由跳转和DOM操作。

<template>
  <div class=“home”>
 	<-- 导航菜单-->
	<div class="navList">
	  <p
		class="navgatorLi"
		v-for="(item,index) in navgator"
		:key="index"
		@click="handleLeft(index)"
	  >
		{{item.title}}
	  </p>
    </div>
    <-- 内容-->
    <div class=“content”>
    	<div id=”id0“>这里是主页</div>
    	<div id=”id1“>这里是产品介绍</div>
    	<div id=”id2“>这里是智能单词</div>
    	<div id=”id3“>这里是智能听说</div>
    	<div id=”id4“>这里是下载中心</div>
    	<div id=”id5“>这里是关于我们</div>
    </div>
  </div>
</template>

export default {
  name: 'Home',
  data() {
    return {
      navgator: [
      	'主页',
        '产品介绍',
        '智能单词',
        '智能听说',
        '下载中心',
        '关于我们',
      ],
      navgatorIndex: 0
    }
  },
  methods: {
    // 点击导航菜单，页面滚动到指定位置
    handleLeft (index) {
      this.navgatorIndex = index
      this.$el.querySelector(`#id${index}`).scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block:    "start"  // 上边框与视窗顶部平齐。默认值
      })
      this.listBoxState=false

      let timeId
      clearTimeout(timeId)
      timeId = setTimeout(() => {
        this.listBoxState=true;
      },200)
    }
  }
}