Scrollpoints make it easy to navigate between sections on your page. With this feature, you can create links that smoothly scroll visitors to specific sections of your page.

  • You can make One Page websites with menu items linking to different sections of the front 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 creating menu items for front page sections.
    For example: On a page/post, you can add links to different sections of the article. This is often seen when we have a long article, and want to add a 'Table of contents' at the top linking to different sections of that article.

This process can be broken into 3 parts:

Step 1: Get ID (HTML Anchor) of the Target Element
Step 2: Create the Link URL using the HTML Anchor from Step 1
Step 3: Add the Link URL from Step 2 to the menu or to the 'Table of Contents' list on the page

Step 1: Get ID (HTML Anchor) of the Target Element

Depending upon the context, there are several ways to assign a HTML Anchor to an element on the page.

➤ Gutenberg Editor

You can add a HTML Anchor to most of the native blocks in the Gutenberg editor.
➣ Select the target block
➣ Goto Block settings in the right sidebar.
➣ Under the Advance tab, add a unique ID in HTML Anchor field.

For example: In the screenshot below, we added a unique ID section-1-title to our Heading block

➤ Frontpage Modules

The themes come with a frontpage made up of various section modules. These modules already have a HTML anchor (ID) applied to them. You can use these IDs to create a link to these frontpage sections.

  • HTML Anchor for Frontpage - Content is frontpage-page-content
  • HTML Anchor for Frontpage - Widget Area A is frontpage-area_a
  • HTML Anchor for Frontpage - Widget Area B is frontpage-area_b
  • HTML Anchor for Frontpage - Widget Area C is frontpage-area_c
  • HTML Anchor for Frontpage - Widget Area D is frontpage-area_d
  • and so on...
➤ Sitewide Sections

Some of the sitewide sections alady have a static HTML anchor. These are listed below:

Topbar:
topbar
Top of the site:
page-wrapper
Header:
header
Main content:
main
Sub Footer:
sub-footer
Footer:
footer

Step 2: Create the Link URL using the HTML Anchor from Step 1

Creating the link to this target location is pretty straightforward. The link consists of 3 parts.
Page URL + # + Target's HTML Anchor

Example 1:
To create a link to a frontpage module (widget area G), the link would be:
https://your-site.com/#frontpage-area_g

Example 2:
In above section 'Step 1', we added a HTML Anchor section-1-title to our Heading block.
Now lets create a link for that:
https://your-site.com/sample-page/#section-1-title

Example 3:
For sitewide sections, we can either create a link to a specific page, or a general link.
➣ For example, https://your-site.com/sample-page/#footer will take you to the 'Sample Page' page and scroll down to the footer section.
➣ On the other hand, if we omit the Page URL, then #footer will scroll to the footer section of whichever page the user is on.

Step 3: Add the Link URL to menu or inline link

The final step is to add the link we created above. You can do this in 2 ways:

1. Add the Link to your Menu

Use the Custom Link option in your WordPress menu to add the link to your primary menu. This technique can be used o create a one page website.

2. Manually add the link anywhere

Add links like you normally do in the editor. This can be used to create a 'Table of Contents'

3. Add a Menu Widget

You can create a new menu with custom scroll links and add this to your sidebar (or any other widget area) using the Navigation Menu widget