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

Пользователь

от ludie , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kurt , год назад

@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.

Пользователь

от cooper.berge , 5 месяцев назад

@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.