internal anchor link is used to create some sort of in-page pagination. Clicking on a
internal anchor link will scroll the current content to a specific part of the layout.
How to create an internal anchor link:
Go to Appearance > Menu.
From the left sidebar, choose Custom Links.
URLfield, enter the CSS ID of the element you want to scroll to.
Link Textfield enter the text, the link will show.
Let's assume that we want to have 2 menu items:
About Us - will scroll to a section that has the
about-usCSS ID set.
Our News - will scroll to a section that has the
our-newsCSS ID set.
Method 1 - Use the WordPress Menu system
Head over to Appearance > Menu and create a new Menu - let's call this one In Page Nav.
Add the links following the information above. The result should look like this:
2. Go to Appearance > Widgets and create a new Custom Widget Area
3. Add the new Custom Widget Area place the Navigation Menu widget
4. Select the Menu created at step 1
Now we are ready to display this menu into our page layout. Edit your page and add the Sidebar module. There are few settings to be done for the Sidebar module:
Content Tab > Widget Area choose the Custom Widget created previously
Design Tab > Layout - deactivate the Show Border Separator option
The final step is to edit the sections to which we want each of our
anchor link to scroll to and set the appropriate CSS ID.
For each section, edit it's settings and go to Advanced tab > CSS ID and enter:
about-usas the CSS ID for the section to which we want to scroll to when the About Us anchor link is clicked
our-newsas the CSS ID for the section to which we want to scroll to when the Our News anchor link is clicked
Method 2 - Use the Code Module to create anchor links
In a code module in the same page where the section to which we want to scroll to add the following HTML code:
<a href="#about-us">About Us</a>
<a href="#our-news">Our News</a>
Make sure that in your page's layout there are sections with the corresponding CSS ID:
Method 3 - Use the Text Module to create anchor links
In a text module add each text into a separate line like so:
Select each of the text lines and add a link to each of one of them, entering each CSS ID of the Section to which we need to scroll to:;