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
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
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 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!
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
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
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.
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.