Vue.js anchor to div within the same component

Another method is to use "scrollIntoView()"

So, euvl's code still stands, except you would change the method slightly:

    new Vue({
      el: '#app',
      methods: {
        goto(refName) {
            var element = this.$els[refName];
          element.scrollIntoView();
        }
      }
    })

If you wanted to get fancy and make the scroll smooth, you can even add the following:

element.scrollIntoView({ behavior: 'smooth' });

Note that this will need a polyfill for older browsers.

Because you are using router in hash mode, you will not be able to scroll that easily because scrolling to /#something will actually redirect you to 'something' page.

You will have to emulate scrolling behaviour on your own, try doing something like that:

//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.

//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">

//Your code:
methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }
}

How it works:

1. Set the references through ref attribute to the element you would like to scroll to;
2. Write a function that will programmatically set window.scrollY to the top of the referenced element.
3. Job is done :)

Update 1:

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

Update 2:

Seems that in Vue 1 ref="name" looked like el:name (docs), here is an updated example:

https://jsfiddle.net/5y3pkoyz/2/