Animated Scrolling / One Page Websites / Landing Pages

Note: Unless otherwise mentioned in a theme, this feature is bundled only in the Premium version of our themes.

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:

  1. Slider A / HTML Slider: frontpage-html-slider
  2. Slider B / HTML Slider: frontpage-img-slider
  3. Widget Area A: frontpage-area_a
  4. Widget Area B: frontpage-area_b
  5. Widget Area C: frontpage-area_c
  6. Widget Area D: frontpage-area_d
  7. Widget Area E: frontpage-area_e
  8. Frontpage Conent: frontpage-page-content
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 🙂

2. Right-click on the element in Chrome browser, and click ‘Inspect’
For the DIY kinda guy/gal.. Click the screenshot below to get an understanding how to find the ID to custom content yourself.
custom-element-ids

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>
Replace 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 + # + Target ID

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:

RESULT:
http://example.com/#my-unique-id

 


 

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>

Notice the 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.
scrollpoint-menu