Multipurpose Website Templates. How to use anchor links

The following tutorial is going to show you how to use anchor links in Multipurpose Website templates.

An anchor link (also referred to as ‘page jump’ link) is a link on a page that brings you to a specific place on that page or to a specific place on a different page. Anchor links can be helpful when you want to bring a website visitor to a specific spot on a page so that they do not have to scroll through all of your content.

Let’s learn how to use them.

1. First, determine which section of your page would you like your website visitor to be brought to. We will take ‘Portfolio templates’ section of our website homepage as an example to show you how to create an anchor link.

   

2. To make it an anchor target, we need to add HTML “id” tag to our section. The code looks as follows:

   
   	
   
   	
   Portfolio Templates
   	
   Showcase any of your products or projects with our great selection of Portfolio
   		
   
   		
   	
   	
   
   

   As you can see, we added an ‘id’ tag with ‘new’ value, so our section now can be targeted with an anchor link.

   

3. Now we need to decide how our link itself will look like. Basically, we can target our anchor with every type of link possible: regular text link, image link, button link, menu item link. Let’s link the button: all other types of links will work in a same fashion.

   

4. Our button default code is as follows:

    
   Start a journey

   To make it work, we need to replace ‘#’ in ‘href’ property declaration with our id and a hashtag:

   Start a journey

   

5. Let’s check this out: upon clicking the button, the page scrolls to the section we need.

6. If your template is using customWaypoints plugin, you can create a smooth scroll to your anchor with the ‘data-custom-scroll-to’ attribute. There is no need to specify ‘href’ attribute value in this case, also there’s no need to add a hashtag:

   Start a journey

   It has the same anchor link function, however the scroll effect is smooth.

   

7. If you want to take your website visitor to a specific section on a different page, you should specify the link in the following format:

   Start a journey

   Where http://localhost/starbis/blog-classic.html is your full page URL and #external is an anchor to an element with id="external" declaration.

   

8. That’s it. Now you know how to use anchor links in Multipurpose Website Templates.

   

Feel free to check the detailed video tutorial below: