/Javascript/Vue/Vue on page link or anchor

Vue on page link or anchor

//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"> </div>




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

    window.scrollTo(0, top);
  }
}

Source: stackoverflow.com

Vue on page link or anchor

// uses example; scrollToElement(this.$route.hash)
// uses example; scrollToElement('#cafe-menu')


scrollToElement (id) {
  // takes input id with hash
  // eg. #cafe-menu
  const el = document.querySelector(id)
  el && el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" })

}

Similar codes

0 vote127 views1 answer
Vue-jstree
Javascript Vue
1 vote119 views1 answer
Vue dynamic create watch
Javascript Vue
-2 votes236 views2 answers
Vue.use is not a function
Javascript Vue
0 vote128 views1 answer
Vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
Javascript Vue
0 vote131 views1 answer
Vue shortcut to create component
Javascript Vue
0 vote239 views1 answer
Error vuejs from chokidar enospc
Javascript Vue
3 votes127 views1 answer
V-switch vuex store
Javascript Vue
1 vote134 views1 answer
Vue create component
Javascript Vue
-2 votes135 views1 answer
Vue js get routes
Javascript Vue
0 vote126 views1 answer
Vue minify images
Javascript Vue