Ask a Question ?
Design & Publish Websites Faster

Create a Smooth Scrolling Effect for your Page Sections

Today we’re going to show how to add a cool smooth effect to the scrolling between sections of the same page.

To learn how to create sections that you can browse to within the same page, take a look at this article.

And see an example of this animated scrolling in action here. Try using the top navigation to browse different sections.

First Things First

First, you have to create the given sections with the Embed HTML app. Check the “Navigate Through Sections of the Same Page” article for reference.

This will set the context so we can proceed with the needed code.

Copy the JavaScript

Copy this script to your clipboard:

If you have trouble seeing the script above, try the raw version.

Open the Custom Code Panel

From the shelf, click on the More button and then on “URL & Custom Tracking Code”.

URL & Custom Tracking Code link

Click here to open the custom code panel

Paste the Code

Finally, paste the code on the respective field, and save.

Code panel for our custom script

Paste the JavaScript you copied above here

That’s it! Try it out on your own site…

Do you have any doubts or comments? Let us know below!

Menu