• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

How To Create Anchor Points With HTML

Here’s my HTML tips on how to:

  1. Create anchor points so you can jump from one position to another on the same page
  2. Jump from one position on one page to any position on another page (on the same site or another site you own)

Anchor points, scroll points or HTML bookmarks as some call them, make it possible to jump from one point on a page to another position on the same page by clicking a link.

You can also jump from any point on any page to another position on another page and even to another position on another site.

Click this link to see what i mean (this link will take you to the middle of the page on another page, on this site)

This helps with fast scrolling points from a link to a specific location on your website.

Creating hypertext anchor point links on the same page/post

  1. Paste the 1st line of HTML from the following Gist where you want the link.
  2. Paste the 2nd line of HTML where you want the anchor point destination.

HTML Anchor Point Using PHP Code #

Step 1 – Add the following code to your child themes functions file.

There’s 2 steps :

Step 2 – Add the following HTML to your editor or anywhere else you want your link to “jump to”.

<a name="recipe"></a>

This code adds the JUMP TO RECIPE link before the content on all single posts.

Adjust the is_singular( 'post' ) conditional tag to control where the link outputs.

Create Anchor Points With Plain Text Links

You can also insert a link which leads to another position on a different page without needing to create a clickable link.

Example: http://wpsites.net/your-download-getting-started-with-wordpress/#Install-wordpress

Simply insert the page url which contains the anchor (<a name=”Install-wordpress“></a>) and add the anchor text on the end starting with #

The orange html code is the anchor you place in any position in any page using your HTML editor.

In other words all you are doing is adding #Install-wordpress to the end of the page url you wish the link too.

http://yourdomain.com/page-which-your-link-arrives-at/#Install-wordpress/

  1. Replace the blue text with any text you like as long as they are exactly the same purple text.
  2. Replace the green text with the url of the page you want the link to arrive at

Scroll to Footer

This HTML enables you to create a link to your footer which, when clicked, takes you to the footer of any Genesis child theme.

Related Tutorials

  • Add Jump To Scroll Point Link Only If HTML Bookmark Exists Within Single Post Content
  • Add Smooth Scrolling To HTML Bookmark Links In Genesis
  • Add Smooth Scrolling To Front Page Widget Areas In Altitude Pro

Reader Interactions

Comments

  1. fotod0g13 says

    June 28, 2016 at 6:28 am

    got it – working now
    not sure what is going on here on my end but I did try that before without the slash and got the same results ( did not work) which is why I added the slash at the end- thinking it might be needed.

    Regardless- it is working now so moving on- thanks for the help – much appreciated

    Best
    Scott

    Log in to Reply
  2. fotod0g13 says

    June 27, 2016 at 4:06 pm

    hi Brad,
    having new issues here with anchor text and links: the image button issue solved with your previous help but now I am having another issue.

    I am now trying to do something similar to what Arie is describing above. I have created a submenu item on my navigation and want that submenu item to go to a section of a different page – where the anchor is located without having to scroll down the page.

    I have created a submenu page on my navbar called” How Do I Qualify” located under the Chapter13 pulldown
    located here:
    http://66.147.244.94/~connefh5/chapter-13-bankruptcy-help/#how-do-i-qualify/

    When I click on the link it takes me the correct page but it does not go to the anchor location on that page. It just goes to the page, not the anchor location on that page.

    Below is the page without the anchor information on the end of the pageURL
    http://66.147.244.94/~connefh5/chapter-13-bankruptcy-help/

    I have placed on that page as the anchor.

    The anchor is located near the bottom of the page- Just above where it says ” Chapter 13 Basic Guidelines”

    I am using Genesis>Executive theme

    thoughts or suggestions on what might be causing this. I would prefer not to add a plugin for this if possible.

    Log in to Reply
    • Brad Dalton says

      June 27, 2016 at 11:09 pm

      What HTML are you using for the anchor?

      Also, this won’t work do-i-qualify-2/ unless it matches the anchor

      Log in to Reply
      • fotod0g13 says

        June 28, 2016 at 4:23 am

        Hi Brad,
        the html for the anchor I am using is

        The anchor is located on this page:
        http://66.147.244.94/~connefh5/chapter-13-bankruptcy-help/#how-do-i-qualify/

        Am I missing a step here of some kind?

        thanks

        Scott

        Log in to Reply
        • Brad Dalton says

          June 28, 2016 at 4:30 am

          I can’t see the HTML for the anchor in your comment reply. Please paste it in a Github Gist and link to it from here.

          Log in to Reply
          • fotod0g13 says

            June 28, 2016 at 5:02 am

            here is the link that shows the html on the page where the anchor is located:
            I am only pasting the anchor code here none of the other code used on the page:
            https://gist.github.com/fotodog13/d716903f05cbf77b2ed276dc9d28d122

          • Brad Dalton says

            June 28, 2016 at 5:45 am

            Remove the slash http://66.147.244.94/~connefh5/chapter-13-bankruptcy-help/#how-do-i-qualify

  3. fotod0g13 says

    June 17, 2016 at 5:17 pm

    Sorry brad hit send before I signed that post-
    Scott V here

    Log in to Reply
    • Brad Dalton says

      June 21, 2016 at 6:49 am

      Here’s the HTML

      Log in to Reply
  4. fotod0g13 says

    June 17, 2016 at 5:17 pm

    Hi Brad,

    I am sing Genesis>executive theme- I am trying to add a jump link from a widget area on the home page, and on other sidebar pages that goes to a widget in the footer( to a form)
    I placed the following html in my top home page widget:
    image button
    and in the footer widget I placed:
    <a name="genesis-footer-widgets"
    and can’t get it to work.

    Wondering if I am missing something here in this tutorial .

    Here is the URl of the site the top button – has the link in it going to the middle footer widget. I have tried a variety of things here with no luck.
    site address: =
    http://66.147.244.94/~connefh5/

    any thoughts? – was hoping to do this without a plug-in

    Log in to Reply
  5. Arie Kootwijk says

    July 17, 2013 at 1:57 pm

    Hii Question..I created a menu with submenu s. I would like to link the submenu s to part of a page
    so the people dont have to scrolll , is this possible in wordpress?? greetings and thank you for advice
    Arie

    Log in to Reply
    • Brad Dalton says

      July 17, 2013 at 2:13 pm

      Hi Arie

      Yes its very easy.

      Create the anchor points manually and add the full url to the submenu item.

      Or install the TOC plugin which auto generates the anchor points based on h2, h3 or h4 sub heading tags and use that url in your submenu link.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags