You can make One Page websites with menu items linking to different sections on the page. The page will scroll down to a section on the page when the site visitor clicks a menu item.
This is not just limited to menu items. You can manually add links as well to different sections on a page. For example, if you have a very large article, you can add links at the top to different article sections. When a visitor clicks on any of these links, the page will automatically scroll down to the corresponding section.
Step 1. Find Target Element’s ID
The first step in creating a scrollpoint is to find the target element’s ID to which you want to scroll to.
Frontpage Modules ID
IDs for various Frontpage modules included in our themes are:
Custom Element’s ID
If you have custom content (content created using plugins, shortcodes, widgets), then finding their ID can be a bit tricky. Since their IDs can be dynamic, there is no way for us to provide you their ID in this documentation as it will be different for different websites based on your site architecture and plugins you are using.
You can follow any of these 3 steps to find an element’s ID:
1. Contact Our Support
The easiest way of all! Simply open a support ticket with us, and one of our support staff will be happy to help you identify the ID of target elements on your page 🙂
3. Add a pseudo placeholder target
If your widget/content/plugin has a place for you to add some text (like a textbox), then you can add a pseudo target like such:
<span id="my-unique-id" ></span>
my-unique-id with a unique ID.
Step 2. Create the Link to the Target
So you got your target element’s ID in step 1. Lets assume it is
my-unique-id. Now lets create a link to this target.
Creating the link to this ID is quite straightforward. The link consists of 3 parts.
Page URL where target is present +
So, if our
my-unique-id element is on the homepage of our site
http://example.com, then the link to the target element will become:
Step 3. Add the Link created
The final step is to add the link we created above. You can do this in 2 ways:
1. Manually add the link anywhere
Following our above example, add an HTML link anywhere on your site like you normally do:
<a href="http://example.com/#my-unique-id" class="scrollpoint">Click Here</a>
class="scrollpoint" in code above. This is what tells our theme script to convert this normal link into a “scrolling link”
2. Add the Link to your Menu
Use the Custom Link option in your WordPress menu to add the link. Dont worry about anything else, as our theme script keeps a lookout for links in menus and automatically converts them to a “scrolling link” if possible.