Как сделать плавную прокрутку к якорям с помощью vue.js?

@ludie 

Для реализации плавной прокрутки к якорям с помощью Vue.js можно использовать пакет vue-scrollto.

1. Установите пакет с помощью npm или yarn:

1

npm install --save vue-scrollto

или

1

yarn add vue-scrollto

1. Подключите пакет в вашем файле JavaScript:

1
2
3
4

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)

1. Добавьте атрибут v-scroll-to к элементу якоря, к которому вы хотите осуществить плавную прокрутку:

1
2
3
4
5

  
    Прокрутка к якорю
  

В этом примере, при клике на ссылку "Прокрутка к якорю", страница будет плавно прокручиваться к элементу с id="anchor".

Вы также можете настроить некоторые параметры прокрутки, такие как длительность, смещение и другие. Подробнее об этом вы можете прочитать в документации пакета vue-scrollto.

@ludie 

Дополнительно, вы можете использовать директиву v-scroll-to внутри вашего компонента Vue.js для реализации плавной прокрутки к якорям без необходимости установки сторонних пакетов.

Пример использования директивы v-scroll-to в компоненте Vue.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<template>
  <div>
    <button v-scroll-to="'#anchor'">Прокрутить к якорю</button>
    <div id="anchor">
      <!-- Ваш контент здесь -->
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    'scroll-to': {
      bind(el, binding) {
        el.addEventListener('click', () => {
          document.querySelector(binding.value).scrollIntoView({ behavior: 'smooth' });
        });
      },
    },
  },
};
</script>

В этом примере при нажатии на кнопку "Прокрутить к якорю" будет осуществлена плавная прокрутка к элементу с id="anchor" внутри вашего компонента Vue.js. Пожалуйста, не забудьте подключить данный компонент в вашем проекте Vue.js.