Friday, June 22, 2018

How to Create a Link to Jump to a Specific Part of a Page - Step by Step Instructions

How to Create a Link to Jump to a Specific Part of a Page - HTML Tutorial First, let me define "page jump link".  If you wish to have a link to a section or paragraph in an article, you can create a page jump link that can be inserted anywhere in an article.  You can even use jump links to "jump" to a section in another article on a website.  Or use one to jump to an article section on a totally different website that you manage by simply using the link to the jump link itself.  


Like this: 


I used page jump links at the top of our Review This Site Directory so visitors could quickly skip to the category of articles they wish to see. I've had several fellow bloggers ask me how I created those indexing page jumps and I happily shared my code.  However, it is easier for me to simply publish this article then to continue sharing the code individually each time it is requested.
 

FAST CLICK INDEX - Click the Category Title to Jump to Specific Section of Our Site Directory
BOOKS    CRAFTS    DECOR     ELECTRONICS     GARDENING    GIFTS    HOLIDAYS    MOVIES    MUSIC    PARTIES    PHOTOGRAPHY    PRODUCTS    RECIPES    SITE REVIEWS    SPORTS    TIPS FOR WRITERS    TOYS    TRAVEL    WEDDING    SPECIAL TRIBUTES        ABOUT THE CONTRIBUTORS    ARCHIVES    




ONE VERY IMPORTANT NOTE: THIS CODE MUST ALWAYS BE ADDED OR CORRECTED ON THE HTML, NOT COMPOSE, OPTION WHEN WRITING ON BLOGGER.

If you ever use Compose on an article on Blogger where you use the jump skips, your jump link code will be lost.
As an example, if I ever wish to add anything to this article, I will have to do so in the html tab. Should it open to compose, click the html tab and close the article immediately without making or saving any changes. Keep opening it until it opens in the html. Never update or save an article that has page jumps while working under the compose tab.


HTML Code to add Jump Links


I'm showing the actual html code that you would need to create a jump link.  This is the code I used in this article to skip to the end.

This code should go at the top, or section where you want to place the option to jump to another section.  Replace the title text with your own descriptive text.

<a href="#the_end_HERE">Skip to End</a> 


And this code should go at the beginning of the section you wish to skip to.

<a id="the_end_HERE">The End!</a>


The id link text must be exactly the same in both links.  As you can see, the visual title text can be different.



Easy Jump Links

Adding page jump links to an article is actually very easy if you are careful and remember to stay in the html tab area on Blogger. I do recommend keeping a copy of your original article html text on a file saved to your computer. Accidents happen, especially if we get in a hurry and need to make a quick change or update an article.

This html jump link code also works on Wordpress!


Happy Blogging & Jumping!


 
 


House of Sylvestermouse











Note: The author may receive a commission from purchases made using links found in this article.

9 comments:

  1. Always terrific to add a helpful blogger tip to our blogging knowledge base. I can imagine a number of places where a link to jump to a specific section of a page or article would prove valuable to a writer and readers. Your blogging tips and shared how-to codes are always appreciated, Miss Sylvestermouse.

    ReplyDelete
  2. You are the Code Queen. What would we do without you? Love that you share your depth of expertise for the benefit of all. This is a very useful guide. Thanks!

    ReplyDelete
  3. Our resident Techy! Thank you for sharing all your coding knowledge. From someone who knows very little about the hidden "html" of computer talk! I will see where I can use this and I'm sure I will find a great opportunity soon.....

    ReplyDelete
  4. Another excellent step-by-step and oh!! so helpful. Your help and expertise are appreciated by so many and more than you know. Thanks for adding all of the others also. I've saved this so I can refer to all of them. Thanks Cynthia :)

    ReplyDelete
  5. I often find myself missing this feature which I had in Expression Web when I built my first site before I switched to WordPress. It was easier there, since I could make the links in compose and forget about HTML. It's nice to have your instructions, but I don't think I could use them if they all have to be implemented in the HTML view and never viewed or changed again in compose. I am often changing and updating my pages in the compose view.

    I do fine in English, but HTML is a language I can only use in monkey mode. I can't really read it or proofread it and if I don't have something to copy as a model I can stumble around forever trying to figure out even simple mistakes, going back and forth to preview until I see I've fixed it. Fortunately I can skip back and forth between views when I make those changes. So as nice as this feature to make jump links is, I can't envision me actually using it except on a page I never planned to update. If I make such a page, I will follow your instructions to the letter. Thank you.

    ReplyDelete
  6. Oh Mouse, you are such a wealth of knowledge. Thank you for this. I recently wished I knew how to do this... but didn't try to figure it out. Now that I know, I wonder if I can remember where I wanted to use it. I am so appreciative that you share these codes and tips with us.

    ReplyDelete
  7. Cynthia, thanks for the reminder on this. I'll just come to this page when I need the code reminder - I end up googling it so now I'll just come right here to get it

    ReplyDelete
  8. Well I never knew that once you had added jump links you couldn't make changes in compose. I use it all the time in wordpress, but it always messed up in blogger - now I know why!

    ReplyDelete
    Replies
    1. I think that is pretty common Louanne. I suspect we have all wondered (at least the first time it happens) why our code didn't work on Blogger. Adding the actual code last when we are composing a post, makes it easier to not mess up initally, but it will still be corrupted if we forget and try to do a quick update.

      Delete