Breaking News: Grepper is joining You.com. Read the official announcement!

vue on page link or anchor

Curious Chimpanzee answered on June 1, 2021 Popularity 9/10 Helpfulness 1/10

answer vue on page link or anchor

vue on page link or anchor

Comment

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

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: anchor javascript

Link to this answer
Share Copy Link

Contributed on Jun 01 2021

Curious Chimpanzee

0 Answers Avg Quality 2/10

Closely Related Answers

vue on page link or anchor

Comment

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

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: anchor an

Link to this answer
Share Copy Link

Contributed on Jun 01 2021

Curious Chimpanzee

0 Answers Avg Quality 2/10

vue on page link or anchor

Comment

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

}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: anchor an

Link to this answer
Share Copy Link

Contributed on Jun 01 2021

Curious Chimpanzee

0 Answers Avg Quality 2/10

vue on page link or anchor

Contents

More Related Answers

vue on page link or anchor

Closely Related Answers

vue on page link or anchor

vue on page link or anchor

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.