Как сделать плавную прокрутку к якорям с помощью vue.js?
Как сделать плавную прокрутку к якорям с помощью vue.js?
2 ответа
@vladimir
Для реализации плавной прокрутки к якорям с помощью vue.js можно использовать библиотеку vue-scrollto. Сначала необходимо установить ее через npm или yarn:
npm install vue-scrollto
или
yarn add vue-scrollto
Затем можно создать метод, который будет обрабатывать клик по ссылке с якорем и вызывать соответствующую функцию из библиотеки vue-scrollto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Section 1
Section 2
Section 3
Section 1 content
Section 2 content
Section 3 content
import { scrollTo } from 'vue-scrollto';
export default {
methods: {
scrollToAnchor(anchor) {
scrollTo(anchor, 1000, { easing: 'easeInOutCubic' });
}
}
}
|
В этом примере метод scrollToAnchor принимает аргумент anchor - это якорь, к которому нужно прокрутить страницу. Затем вызывается функция scrollTo из библиотеки vue-scrollto, которая принимает три аргумента: якорь, время плавности прокрутки и тип эффекта (в данном случае используется cubic-bezier).
@vladimir
Дополнительно можно использовать директиву v-scroll-to для удобства:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template>
<div>
<div>
<a v-scroll-to="'#section1'">Section 1</a>
<a v-scroll-to="'#section2'">Section 2</a>
<a v-scroll-to="'#section3'">Section 3</a>
</div>
<div id="section1">Section 1 content</div>
<div id="section2">Section 2 content</div>
<div id="section3">Section 3 content</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto';
export default {
directives: {
'scroll-to': VueScrollTo.directive,
},
};
</script>
|
Этот пример демонстрирует использование директивы v-scroll-to для ссылок, которые прокручивают страницу к соответствующему якорю с плавностью.