vue on page link or anchor

Oldselflearner1959

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

View another examples Add Own solution

Steven Lowes 105 points

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

//Your view:
// &lt;a class=&quot;porto-button&quot; @click=&quot;scrollMeTo('porto')&quot;&gt;Porto, Portugal&lt;/a&gt;
// ...
// &lt;div ref=&quot;porto&quot; class=&quot;fl-porto&quot;&gt; &lt;/div&gt;




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

    window.scrollTo(0, top);
  }
}

Thank you! 1

4 (1 Votes)

GERSHWiiN 140 points

                                    
// 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 &amp;&amp; el.scrollIntoView({ behavior: &quot;smooth&quot;, block: &quot;nearest&quot;, inline: &quot;nearest&quot; })

}

Thank you! 2

5 (2 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

use anchor tag as router-link vue vue router anchor link vue anchor href should we use anchor tag in vue ? what to use as anchor tag in vue vuejs a href on click direct code vue href a link vue router anchor tag vue link href vue href link vuejs href links vue router anchor vuejs a tag router anchor vue a href link vue a tag href anchor vue vuejs href link vue on page link vue on page link or anchor

vue on page link or anchor

Welcome Back!

Create a Free Account