Adding Same-Page Scrolling Anchor Links

Adding Same-Page Scrolling Anchor Links

Adding Same-Page Scrolling Anchor Links

This is a premium feature and available in version 4.0.1+

Same-page scrolling anchor links are links that point to a specific location in the same page. When you click on a same-page link, your browser will scroll towards the pointed area.

You need two things in order to create a same-page anchor link:

  1. A custom class or a custom ID on an element, and
  2. A link or button that references the custom class or ID

1. A custom class or a custom ID on an element

Pick any element near the bottom of your page and then open up its properties. In the advanced area, add a custom class or custom ID named ” go_here

2. A link or button that references the custom class or ID

Now create a link or add a button element somewhere near the top of your page. Instead of adding a URL as the link, use ” .go_here” (with the dot) if you added “go_here” as a custom class; or use “#go_here” (with the hash) if you added it as a custom ID.

After you save your page, when you click on your link/button, it should now scroll smoothly towards the element on the bottom of your page.

You can also use this to target named anchors

Named anchors such as

<a name="go_here"></a>

can also be targetted by adding a link to “#go_here” (with the hash)

Other uses

You can also target any other areas in your page, even outside the editor area as long as you target them using their class names or IDs.

Still need help? Contact Us

Share this page!

Facebook
Twitter
LinkedIn
WhatsApp
Telegram
Skype

The Author

Contact Us