How To Create On Page Anchor Navigation Links

Updated: July 2, 2018
Filed Under:

 

If you are looking for how to create a link to jump to a specific part of a page, then this is the post for you. Depending on what tools you use on your website, there are several ways you can do this.

My prefered way is to create them in my page builder, Elementor. But here is a manual way to create them.

1. Name the Target Area

Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever as long as it's in the right spot), add id=”something”, you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).

An example would look like this: <div id=”pricing-table”>The content of your div here.</div>

2. Link To Your Anchor Target Area

To link to your anchor simply use: <a href=”#pricing-table”>Link Text Here</a>
or if it's on another page: <a href=”pagename#pricing-table”>Link Text Here</a>

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.
appsumo-logo

ClickMinded (HOT) - $149

Learn how to climb the search rankings and get more traffic with ClickMinded

appsumo-logo

Feedier LTD - $49

Entertain and engage customers with enjoyable surveys from Feedier

appsumo-logo

GoPinLeads LTD - $39

Get business and employee details within minutes using GoPinLeads

website-hosting-discount

InMotion Hosting

56% Discount Offer

free-course-offer

Free Course Offer

WordPress Starter Course

  • Tony says:

    Adam, can you please do a tutorial for Pods plugin and Elementor 2.0 … Precisely on how to create a template for a new post type (NOT the existing default post types).

  • >