How to Smooth Scroll to Page or Post Content on Menus Click in WordPress Website

Last modified date


This is most frequently asked question in post comments that how do we scroll to particular content on menu click. This is so simple and easy for WordPress users, here I’ll show step-by-step how to work with on page auto scrolling when you click on header menu links.

People without HTML or CSS skills can also easily integrate this function on their website.

Step 1:

First login to your WordPress Website and Visit site from there. On the top bar you will see your Website Name, Customize, New, Edit Page, and Page Builder.

Step 2:

Click on Page Builder add your Favorite template and edit it with your own content first.  After you added content click on row settings-Advanced and scroll down to ID and Class. Give any unique name which must starts with letter as shows in example. Save it, click on done and publish changes to page builder.

 Step 3.

Go to Dashboard-Appearance-Menus-Custom Links and add your template assigned ID starting with # as shown in below picture, after adding it give any menu name to your custom link then click on Add to Menu and Save Menu (save your custom menu link to Primary menu so that you can see it on your web-page ).

Now it’s done go to your website and test it you will see you page will scroll to your content when clicked on it.

Note: in rare cases this function may not work properly, in that case you need to add complete website URL name followed by # and id name like sown in the figure.

You can create as many as possible templates using Page Builder give all unique ID for each template and add them to you custom menu links to scroll to the particular page.

Tips: whenever you create custom template using page builder doesn’t forget to click on done and publish changes.