Using Achor Tags

Anchor Tags.

We have all seen them and for the most part we have all used them to navigate through a site. They are used as bouncing arrows to notify the user that there is more content below or even as a way to get the user back to the top of the page.

In this tutorial I am going to show you how to set them up to work with your site.

But before we get started you are going to need to install a plugin called page scroll to id. This plugin will make scrolling up and down the page super easy once we get the anchor links set up. Once you have installed  the plugin go to settings > page scroll to id so we can make some changes. At the top of the page we need to include another selector for the plugin to look for.

Add this bit of code to the selector box.

a[href*='#']

It should look like this afterwards.

ice_screenshot_20160317-175559

The fun stuff

Now that we have set up the plugin to do all the heavy lifting we can build our links.

Go to your site if you have one already set up and pick a section down the page preferably a container with sections in it. Open up the container options and navigate to the advanced options. Within the advanced option is where you will the the id of the container.

 

The id for the section in the picture is #splashup_uyfyu59    Copy and paste this id to your notepad so you can find it in a few.

Go to your menus at  appearance > menus and create a new custom link and call it whatever  like. In the url area add the id of the section with a pound sign in front of it. So in this particular case it would be

#splashup_uyfyu59

Now return to the front of your site and witness the magic.

If you have any questions post them below.

 

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

15 Responses to "Using Achor Tags"
    • The options for page scroll to id can be found under settings > page scroll to id and look for offset settings which is 6 options down.

  1. Ciao! Hey there... this is working like a charm, but just saw that its throwing off this js error: Uncaught Error: Syntax error, unrecognized expression: a[rel='m_PageScroll2id'], a[href*=,._ps2id
    Plugin conflict?

    • Hi Judith, It may be because of the new autoscroll to anchor the comes with the platform plugin now. But I am not sure but I will check one of my site to see if I get an error also.

  2. Ciao...so sorry for the slow reply. Got caught up in ....life in the real world!
    Fixed the code, not sure why it got truncated. But I'm still seeing a js error. jquery.js,qver=1.11.3.pagespeed.jm.zixJPNMRNN.js:1 Uncaught Error: Syntax error, unrecognized expression: #container_uee60r4?pl_edit=on&pl_start=yes
    The container that's being referenced has a griddle element inside it if that helps. Did you get a chance to see if you are also getting an error? Thanks!!

  3. Besides the menus, is there a way to use this to jump to a specific Section on another page? Looking to use the Salebar extension to lead people directly to a newsletter signup section.

  4. Good tutorial Aires. Working on a new site at the moment, but encountered a problem with this. The nav elements in the Meganav are staying highlighted when on the page. Is there a CSS fix? The site is not live just yet.

    • Hi Keith, you can adjust the current or active state of links with css. Currently not at my desk but I will have a look later.

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

Using Achor Tags

Published on by | 15 Comments

Anchor Tags.

We have all seen them and for the most part we have all used them to navigate through a site. They are used as bouncing arrows to notify the user that there is more content below or even as a way to get the user back to the top of the page.

In this tutorial I am going to show you how to set them up to work with your site.

But before we get started you are going to need to install a plugin called page scroll to id. This plugin will make scrolling up and down the page super easy once we get the anchor links set up. Once you have installed  the plugin go to settings > page scroll to id so we can make some changes. At the top of the page we need to include another selector for the plugin to look for.

Add this bit of code to the selector box.

a[href*='#']

It should look like this afterwards.

ice_screenshot_20160317-175559

The fun stuff

Now that we have set up the plugin to do all the heavy lifting we can build our links.

Go to your site if you have one already set up and pick a section down the page preferably a container with sections in it. Open up the container options and navigate to the advanced options. Within the advanced option is where you will the the id of the container.

 

The id for the section in the picture is #splashup_uyfyu59    Copy and paste this id to your notepad so you can find it in a few.

Go to your menus at  appearance > menus and create a new custom link and call it whatever  like. In the url area add the id of the section with a pound sign in front of it. So in this particular case it would be

#splashup_uyfyu59

Now return to the front of your site and witness the magic.

If you have any questions post them below.

 

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

15 Responses to "Using Achor Tags"
    • The options for page scroll to id can be found under settings > page scroll to id and look for offset settings which is 6 options down.

  1. Ciao! Hey there... this is working like a charm, but just saw that its throwing off this js error: Uncaught Error: Syntax error, unrecognized expression: a[rel='m_PageScroll2id'], a[href*=,._ps2id
    Plugin conflict?

    • Hi Judith, It may be because of the new autoscroll to anchor the comes with the platform plugin now. But I am not sure but I will check one of my site to see if I get an error also.

  2. Ciao...so sorry for the slow reply. Got caught up in ....life in the real world!
    Fixed the code, not sure why it got truncated. But I'm still seeing a js error. jquery.js,qver=1.11.3.pagespeed.jm.zixJPNMRNN.js:1 Uncaught Error: Syntax error, unrecognized expression: #container_uee60r4?pl_edit=on&pl_start=yes
    The container that's being referenced has a griddle element inside it if that helps. Did you get a chance to see if you are also getting an error? Thanks!!

  3. Besides the menus, is there a way to use this to jump to a specific Section on another page? Looking to use the Salebar extension to lead people directly to a newsletter signup section.

  4. Good tutorial Aires. Working on a new site at the moment, but encountered a problem with this. The nav elements in the Meganav are staying highlighted when on the page. Is there a CSS fix? The site is not live just yet.

    • Hi Keith, you can adjust the current or active state of links with css. Currently not at my desk but I will have a look later.

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match