# Javascript Smooth scroll **URL:** \ **Category:** Javascript\ **Tags:** tutorial, tool\ **Created:** [April 7, 2020, 5:44am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928 "2020-04-07T05:44:17Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kasapvictor](https://avatars.discourse-cdn.com/v4/letter/k/779978/32.png) [@kasapvictor](https://forum.pinegrow.com/u/kasapvictor)\ **Post date:** [April 7, 2020, 5:44am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/1 "2020-04-07T05:44:17Z")
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](https://monosnap.com/file/1WyKP54Mqm72trNbJyUFDCYgFfeoo0) Archive - [https://yadi.sk/d/h9cIoDPl2WUGyw](https://yadi.sk/d/h9cIoDPl2WUGyw) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [April 7, 2020, 9:42am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/2 "2020-04-07T09:42:25Z")
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. ```auto 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 ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [April 7, 2020, 10:01am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/3 "2020-04-07T10:01:22Z")
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](https://caniuse.com/#search=scroll-behavior) ---
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [April 7, 2020, 10:04am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/4 "2020-04-07T10:04:28Z")
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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4ebb0253cc07ae47e42c2b2042a8288de5aa1718.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [April 7, 2020, 11:54am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/5 "2020-04-07T11:54:33Z")
Yeah, I should have posted the caniuse link. ---
**Author:** ![kasapvictor](https://avatars.discourse-cdn.com/v4/letter/k/779978/32.png) [@kasapvictor](https://forum.pinegrow.com/u/kasapvictor)\ **Post date:** [April 8, 2020, 5:24am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/6 "2020-04-08T05:24:16Z")
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! new archive with bootstrap 4 - [https://yadi.sk/d/TMrglRR1edgw4g](https://yadi.sk/d/TMrglRR1edgw4g) ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7bb7b1f373b18cfa43b33d375158950445fc3285.png) ---
**Author:** ![kasapvictor](https://avatars.discourse-cdn.com/v4/letter/k/779978/32.png) [@kasapvictor](https://forum.pinegrow.com/u/kasapvictor)\ **Post date:** [April 8, 2020, 5:25am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/7 "2020-04-08T05:25:24Z")
> [@Emmanuel](#): > > Also, @kasapvictor for testing with Pinegrow Internal web server, do not forget to specify the \_self target for your menu item links Thank you for advice 😀 ---
**Author:** ![kasapvictor](https://avatars.discourse-cdn.com/v4/letter/k/779978/32.png) [@kasapvictor](https://forum.pinegrow.com/u/kasapvictor)\ **Post date:** [April 8, 2020, 5:43am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/8 "2020-04-08T05:43:10Z")
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](https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2) ---
**Author:** ![SteveH](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/steveh/32/2560_2.png) [@SteveH](https://forum.pinegrow.com/u/SteveH)\ **Post date:** [April 8, 2020, 3:56pm UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/9 "2020-04-08T15:56:58Z")
I had real good results with this script: /\* [https://css-tricks.com/snippets/jquery/smooth-scrolling/](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 ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [April 8, 2020, 7:32pm UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/10 "2020-04-08T19:32:01Z")
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. 😉 - [https://github.com/cferdinandi/smooth-scroll](https://github.com/cferdinandi/smooth-scroll) - etc., 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. 😜 ---
**Author:** ![kasapvictor](https://avatars.discourse-cdn.com/v4/letter/k/779978/32.png) [@kasapvictor](https://forum.pinegrow.com/u/kasapvictor)\ **Post date:** [April 9, 2020, 5:33am UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/11 "2020-04-09T05:33:37Z")
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](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](https://codepen.io/vic4884/pen/dyYyMGb) ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [April 11, 2020, 5:42pm UTC](https://forum.pinegrow.com/t/javascript-smooth-scroll/3928/12 "2020-04-11T17:42:38Z")
> [@kasapvictor](#): > > without additional scripts spy scroll 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](https://github.com/cferdinandi/gumshoe). Again no JQuery needed when you combine the two scripts you get all the features you have described with a tiny vanilla footprint.