search

Yuliang-Lee / vue2-smooth-scroll

:surfer:Simple vue smooth scroll
MIT License
121 stars 18 forks source link

Multiple page Nav - how to use with <a href="/#foo"> #32

Closed atiar-cse closed 4 years ago

atiar-cse commented 4 years ago

The codes are working but the problem is, when I have the href like <a href="/#anchor">Anchor</a>, it does not seem to work with my codes. If I have the same without the forward slash, it works like <a href="#anchor">Anchor</a>. When visit new route (/contact-us) - it loaded as base_url/contact-us#anchor and never works because the #anchor section inside home page.

I am using vue-router.

Any help will be appreciated.

Yuliang-Lee commented 4 years ago

I think the correct approach should be to call this.$smoothScroll programmatically when entering a new page component through the route to scroll the page to the specified DOM node

mathijsfr commented 3 years ago

I added smooth scroll in the mounted section of my home page like so:

let hash = this.$route.hash; if (hash) { hash = hash.replace("#", "") let section = window.document.getElementById(hash) this.$nextTick(() => { this.$smoothScroll({ scrollTo: section, duration: 500, }) }) }

However, this scrolls untill it sees the relevant section. When I use it in a directive manner, it works correctly. I.e. the section is scrolled to the top of the screen. I have to use smooth scroll progamatically, because I am coming from a different page just like OP.