How to create a link that jumps down on the same page.

As I messed around with links this week, I discovered a neat little trick for creating links that jump down to another section on the same page. Wikipedia uses this a lot, especially in their contents section of pages with a lot of information. Here’s what I mean:

By clicking on the “National” link, you are brought down to the National Government section of the same page.

The more assignments I added to my webpage, the longer I had to scroll down to see all the assignments I’ve done. But as soon as I discovered the beauty of same page links, all my scrolling woes disappeared.

Insert this piece of code wherever you want your link:

<a href=#SomeLabel>Click here to jump to another section of this page.</a>

Then insert this code where you want the link to jump to.

<a id=”SomeLabel”name=”SomeLabel”></a>

It is important to make sure that the “id” and “name” in the second tag are exactly the same. Some browsers don’t recognize the “id” tag, so both are required. Rename the “SomeLabel” to something relevant to whatever you are jumping down to. This is especially helpful if you want to jump down to different sections of the website without getting your code mixed up. This bit of code is great for “Back to top” links, as well. Of course, you’ll have to flip the code, putting the top one at the link site and the bottom one at the top of your page. Happy coding!

Mairead Lynn

~ by maireadlynn on September 19, 2011.

One Response to “How to create a link that jumps down on the same page.”

  1. The hook from the start of this post is great. You took something that we’re all familiar with, and then explained it very well. It’s helpful that you also explained the concept of exactly what goes on when you click a same-page link so that we fully grasp what we’re getting into. Thanks for this post!

Comments are closed.

%d bloggers like this: