左右互通，丝滑体验！Vue 双向锚点实现指南

前端

2023-07-11 03:44:34

双向锚点：提升用户体验的利器

在现代网络世界的快节奏环境中，用户希望快速轻松地找到他们所需的信息。双向锚点在这种需求中发挥着至关重要的作用，让用户在网站或应用程序的不同部分之间无缝导航。

什么是双向锚点？

双向锚点本质上是页面中的链接，可以同时从两个方向跳转。它们允许用户从右侧导航栏快速跳转到内容区域中的特定部分，同时也可以从内容区域返回到导航栏中相应的链接。这种双向连接增强了用户体验，消除了繁琐的滚动或层层跳转。

双向锚点的强大功能

双向锚点为用户带来了诸多好处，包括：

轻松导航： 用户只需单击导航栏中的链接，即可立即跳转到页面中的特定部分。这消除了逐行滚动的需要，节省了时间并增强了便利性。
无缝连接： 双向锚点在左右内容区域之间建立了无缝连接。用户可以轻松地在不同部分之间移动，而不会感到迷失或不知所措。
结构清晰： 锚点有助于清晰地组织页面内容。通过将特定主题或部分链接到导航栏中的链接，用户可以轻松识别并快速找到所需的信息。
直观易用： 双向锚点的操作非常直观。即使是初次使用的用户也可以立即理解其工作原理，从而确保无缝的导航体验。

使用 Vue 实现双向锚点

在 Vue 应用程序中实现双向锚点非常简单，只需三步即可完成：

在右侧导航栏添加锚点链接：

<ul>
  <li><a href="#section1">章节 1</a></li>
  <li><a href="#section2">章节 2</a></li>
  <li><a href="#section3">章节 3</a></li>
</ul>

在左侧内容区域添加锚点：

<div id="section1">
  <h1>章节 1</h1>
  <p>...</p>
</div>

<div id="section2">
  <h1>章节 2</h1>
  <p>...</p>
</div>

<div id="section3">
  <h1>章节 3</h1>
  <p>...</p>
</div>

使用 Vue 实现锚点定位：

import Vue from 'vue'

Vue.component('anchor-navigation', {
  template: '<ul><slot></slot></ul>',
  mounted() {
    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
      anchor.addEventListener('click', (event) => {
        event.preventDefault()

        const target = document.querySelector(anchor.getAttribute('href'))
        target.scrollIntoView({ behavior: 'smooth' })

        this.$emit('anchor-click', anchor.getAttribute('href'))
      })
    })
  }
})

Vue.component('anchor-target', {
  template: '<div><slot></slot></div>',
  props: ['id'],
  mounted() {
    this.$on('anchor-click', (anchor) => {
      if (anchor === `#${this.id}`) {
        this.$el.scrollIntoView({ behavior: 'smooth' })
      }
    })
  }
})

new Vue({
  el: '#app'
})