Как в Vue сделать плавный скролл до якоря?

Question

Ни как не получается сделать плавный скролл в Vue. Пробовал так, но не получается.

  el: '#app',
  data: {
    items: [
      { 
        name: 'Home',
        link: '#home'
      },
      { 
        name: 'Portfolio', 
        link: '#portfolio'        
      },
      { 
        name: 'About ', 
        link: '#about'
      },
      { 
        name: 'Contact',
        link: '#contact'
      }
    ]
  },
 methods:{
   onClick() {
       let elmnt = document.getElementById("app");
      elmnt.scrollIntoView({ behavior: "smooth" });
    }
  }
} 

все примеры не работают. Сделал так, но работает не правильно (не могу вставить ссылку пишет ошибку)
https://jsfiddle.net/8xmwfoh0/1/

Answer 1

Для того, чтобы сделать то, что Вы хотите, можно воспользоваться этим плагином.
С помощью его, Вы легко сможете осуществить анимационный переход к динамическим элементам на Ваших страницах/компонентах.

Вот пример с документации:

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
 
Vue.use(VueScrollTo)
 
// You can also pass in the default options
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
 
<div id="element">
    Hi. I'm #element.
</div>

БЛОГ НА HUSL

Как в Vue сделать плавный скролл до якоря?

Ответы (1 шт):