Usually an internal anchor link
is used to create some sort of in-page pagination. Clicking on an internal anchor link
will scroll the current content to a specific part of the layout.
How to create a an internal anchor link:
Go to Appearance > Menu.
From the left sidebar choose Custom Links.
In the
URL
field enter the CSS ID of the element you want to scroll to.In the
Link Text
field enter the text the link will show.
Example
Let's assume that we want to have 2 menu items:
About Us - will scroll to a section that has the
about-us
CSS ID set.Our News - will scroll to a section that has the
our-news
CSS ID set.
Method 1 - using 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-us
as the CSS ID for the section to which we want to scroll to when the About Us anchor link is clickedour-news
as the CSS ID for the section to which we want to scroll to when the Our News anchor link is clicked
Method 2 - using 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:
<ul>
<li>
<a href="#about-us">About Us</a>
</li>
<li>
<a href="#our-news">Our News</a>
</li>
</ul>
Make sure that in your page's layout there are sections with the corresponding CSS ID:
about-us
our-news
Method 3 - using the Text Module to create anchor links
In a text module add each text into a separate line like so:
About US
Our News
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:;
#about-us
#our-news