Set Anchor Links to Smoothly Scroll Down your Page

Add a smooth scroll transitions to anchor links set up on your page.

Add Smooth Scroll Effect

  1. First, You will need to have an Anchor link set on the page.
  2. Press the "ESC" key on your keyboard to deselect all objects on the page.
  3. Press the J then S key to bring up the <JavaScript> editor.
  4. If the <JavaScript> editor already has custom JS included. Head to step 10. 
  5. If the <JavaScript> editor has just the $(document).ready(function() code, select all and delete.
  6. With the <JavaScript> editor empty, copy and paste the code from step 7 into the editor.
    Check the example image below to see if the code looks as described.
  7. $(document).ready(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")||location.hostname==this.hostname){var e=$(this.hash);if((e=e.length?e:$("[name="+this.hash.slice(1)+"]")).length){var t=$(".fixed-header");return $("html,body").animate({scrollTop:e.offset().top-(t&&"block"==t.css("display")&&t.height())},1e3),!1}if("#top"===this.hash)return $("html, body").animate({scrollTop:0},1e3),!1}})});
  8. Click "Save & Close" at the top right of this pop up.
  9. Click "Save" and "View Live" to see your smooth scrolling anchor.
  10. If there is existing custom JS on your page, add the code from Step 11 before the last  }) ;  in the <JavaScript> Editor.
  11. $("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")||location.hostname==this.hostname){var e=$(this.hash);if((e=e.length?e:$("[name="+this.hash.slice(1)+"]")).length){var t=$(".fixed-header");return $("html,body").animate({scrollTop:e.offset().top-(t&&"block"==t.css("display")&&t.height())},1e3),!1}if("#top"===this.hash)return $("html, body").animate({scrollTop:0},1e3),!1}});

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!