How To Create HTML Links That are Page Jumps
HTML links that are page jump are links that take you to specific part on the same page. They are used on long pages to make it easier for the user to click on a link rather than scroll down the page.
These links will automatically scroll down to a part of the page or link to a specific part of another page. Normal links take users to the top of a new page.
So how do you create an HTML link that’s a page jump?
They use the same <a> element as any link, but links that point to a certain part of a document. The part of the page that you want to link to will need be assigned a name.
So let’s say you want to point to the bottom of a page, assign a name to the bottom of the page by using the name element like this …
<a name=”bottom”></a>
Nothing goes in between the opening and closing tags.
Then create the link pointing to it by setting the href to the name above but with a pound sign in front of it. The pound is what distinguishes a page jump from a regular link that goes to a different part of the page.
<a href=”#top” href=”#top”>Click here to return to the top of this page</a>
The link below is an example that will take you back to the top of the page.
Click here to return to the top of this page
You can also place this type of link on another page on your website. Let’s say for example I want to link to the middle of a specific page from another page on your website. First you’ll need to assign a name to the middle of the page. For example: <a name=”middle”> <a>
The link will then need to point to the page name or the full URL with a #middle at the end like the example below. Make sure to change the URL to your own.
<a href=”http://www.yourdomain.com/yourpagename.html#middle”>Link to middle of the page</a>
Notice the link is the full URL to the page and then added at the end is the # and middle.
This link will work from anywhere even from another website.
The proper way to use links is to use them to link to another page. But if you must, use them wisely and don’t overdo it. Page jumps should only be used if a page is extremely long and it’s hard to break up the page into multiple pages.
One example would be to use them in Table of Contents as in PDF files. Another one may be in long lists like that of FAQ’s. You can list the questions up at the top of the page and then link them to the detailed answers lower down on the page. This way a user can see all the FAQ’s up at the top of the page without scrolling down.
I need to create a page jump from one page in my website to a specific place on another page of my website. In fact, I need to do this repeatedly with several page combinations.
You addressed this issue and presented an example, using your own website. Unfortunately, I could not make head or tail out of that example.
I could not be sure whether your example of the proper code ran both the source code and the destination code together, or, if you were only showing the source code. I also have no idea where the element “mce” came from in the example you presented. Its meaning/use was not explained.
I would greatly appreciate it if you could send me a fuller explanation of the aforementioned example.
Thank you in advance for any assistance you can provide.
Don,
There was a typo in the example code in the article (fixed now). Example for you to create a link to the middle of your tell a friend page would look like this.
< a href="http://www.funniesttoptenlists.com/tell_a_friend.html#middle"> Go to middle</a>Then make sure you assign a name to the middle of that page as well.
Insert the name tag like this to the middle of your page.
<a name="middle"></a>Middle is just an example but you can use this for any part of the page. Name the section you want to point to and then point to that name like the example above. Hope that helps.
Would it be alright if I link up to this, from my web site? I’m needing to collect as many sources of information as I am able.
Of course you can link to this. The full URL is:
http://www.createbetterwebsites.com/html-links-page-jumps.html
pretty useful stuff, overall I think this is worth a bookmark, thanks