Javascript Smooth scroll

Hello.
Can somebody help?
I added smoothscroll interaction for all html, the mouse scroll became smooth, how can I add a smooth scroll from an anchor link to an element?

*it’s plane project without any components, just plane index.html

Video - https://monosnap.com/file/1WyKP54Mqm72trNbJyUFDCYgFfeoo0
Archive - https://yadi.sk/d/h9cIoDPl2WUGyw

Your post title is “JavaScript smooth scroll”, but you don’t actually need JS for this. The Interactions ‘smooth scroll’ will help with the user moving between elements using scroll on the mouse. For anchor link scrolling, the easiest way is to add a new CSS rule, applied to your whole page.

html {
scroll-behavior: smooth;
}

I think this will accomplish what you want it to. This won’t work on IE11 or Safari.
Note: The PG renderer will sometimes give a page flash when navigating to the first anchor. This won’t happen if you open the page in a normal browser.
The other thing I noticed is that you anchor links are

1 Like

Excellent @RobM,
When facing the question, I didn’t think about it and even if not fully “universal”, it’s a good solution.

https://caniuse.com/#search=scroll-behavior

2 Likes

Also, @kasapvictor for testing with Pinegrow Internal web server, do not forget to specify the _self target for your menu item links.

Screenshot 2020-04-07 12.02.48

1 Like

Yeah, I should have posted the caniuse link.

Thank you very much for your advice! Works! But you are right again, it doesn’t work in safari, I need to look for another solution :frowning: This is a cool solution, but it will not work in this project. It cannot be solved with the help of PG … as I understand it. Strange, I looked at many examples where it is used bootstrap 3-4 and they immediately have a smooth scrolling, I tried connecting the bootstrap, but this did not help the solution.In any case, thanks for the advice!

new archive with bootstrap 4 - https://yadi.sk/d/TMrglRR1edgw4g

Thank you for advice :grinning:

I found a solution, but I was more interested in the solution using PG, of course I can add the script myself, but it’s strange why this function works in other video examples

solution for custom script - https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

I had real good results with this script:
/* https://css-tricks.com/snippets/jquery/smooth-scrolling/ */
Used the “Smooth Scroll with jQuery” script for a “Scroll to Top” link in the footer of my pages.
Works in Safari and Chrome. Both Mac and PC

If you can’t use the CSS only method, then there is still no need for JQuery for literally anything nowadays, after all it’s 2020 already. :wink:

BootStrap 5 is dropping JQuery and I hope that finally helps with its demise and usage overall. Then again its 2020 and do we really still need BootStrap either. :stuck_out_tongue_winking_eye:

1 Like

Has anyone tried to do without additional scripts spy scroll using only PG? Just interesting =)

Share with your on script link - https://snippets.cacher.io/snippet/c72ae964117cd5f149f1

This script does:
smooth scroll - all browsers,
automatic adding class for item menu while scroll current section

codepen - https://codepen.io/vic4884/pen/dyYyMGb

If you take time to review the link I posted above, it includes a subsequent link for another vanilla library for scroll spy call Gumshoe. Again no JQuery needed when you combine the two scripts you get all the features you have described with a tiny vanilla footprint.

2 Likes