vue on page link or anchor

// scroll to element using quasar library

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


import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll

    scrollToElement (id) {
      if (id && id !== '') {
        let el = document.querySelector(id)
        if (el) {
          const target = getScrollTarget(el)
          const offset = el.offsetTop
          const duration = 1000
          setScrollPosition(target, offset, duration)
        }
      }
    },

Posted by: Guest on June-01-2021

// 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" }) }

//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); } }

Code answers related to "vue on page link or anchor"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "vue on page link or anchor"

Code answers related to "vue on page link or anchor"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us