vue on page link or anchor

1// scroll to element using quasar library
2
3// uses example; scrollToElement(this.$route.hash)
4// uses example; scrollToElement('#cafe-menu')
5
6
7import { scroll } from 'quasar'
8const { getScrollTarget, setScrollPosition } = scroll
9
10    scrollToElement (id) {
11      if (id && id !== '') {
12        let el = document.querySelector(id)
13        if (el) {
14          const target = getScrollTarget(el)
15          const offset = el.offsetTop
16          const duration = 1000
17          setScrollPosition(target, offset, duration)
18        }
19      }
20    },

1
2// uses example; scrollToElement(this.$route.hash)
3// uses example; scrollToElement('#cafe-menu')
4
5
6scrollToElement (id) {
7  // takes input id with hash
8  // eg. #cafe-menu
9  const el = document.querySelector(id)
10  el && el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" })
11
12}

1//P.S. the code is written for Vue 2.
2//You will have to adjust it to Vue 1.
3
4//Your view:
5// <a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
6// ...
7// <div ref="porto" class="fl-porto"> </div>
8
9
10
11
12//Your code:
13methods: {
14  scrollMeTo(refName) {
15    var element = this.$refs[refName];
16    var top = element.offsetTop;
17
18    window.scrollTo(0, top);
19  }
20}
21