Jumping Link Inside Pages

It is called Page Jumps or Anchor Tags. The ability to jump within the current open page. Theory is you have to create a "link" to a specific part of the page you want to jump-in. Have you ever visited websites with "Top" beside the article, this is usually how "Move to Top" works. This is also very useful if you have a very long article. Here let me show you. By the way photos used within the article is from the amazing and generous FancyCrave - they offer free stock photos.

Jump to : Paragraph #1 - Paragraph #2 - Paragraph #3

Jump to Tutorial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.Mauris scelerisque faucibus ante eget bibendum. Aenean condimentum consequat pulvinar. Nam ut mattis lectus. Sed vitae quam est. Aenean nec tincidunt risus. Nunc facilisis enim sed sapien euismod, eu efficitur lorem auctor. Donec tincidunt vehicula facilisis. Vivamus eget nisi erat. Quisque magna lacus, commodo vitae justo id, fermentum placerat libero. Proin vel magna velit. Quisque dignissim dignissim diam at aliquet. Duis vitae tincidunt ligula, ac placerat massa. Quisque turpis mauris, iaculis ac risus ut, malesuada faucibus lacus. Cras vel odio eu dui iaculis dignissim. Ut ut placerat ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.Ut eu auctor felis, convallis euismod nulla. Sed blandit eros eu erat tristique, a blandit orci tristique. Curabitur at metus ut risus pharetra tristique id commodo est. Praesent dapibus justo tortor, et fermentum elit tincidunt eget. Duis eu tincidunt eros. Nam sit amet dolor id metus varius rutrum. Fusce accumsan lectus id arcu lacinia convallis. Ut accumsan magna risus, sed ornare massa iaculis sed. Nulla ac vestibulum massa, a pharetra tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.

Top

Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet. In consectetur magna nec velit sodales posuere. Curabitur non gravida neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae elit at urna viverra ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet. In consectetur magna nec velit sodales posuere. Curabitur non gravida neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae elit at urna viverra ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.

Top

Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet. In consectetur magna nec velit sodales posuere. Curabitur non gravida neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae elit at urna viverra ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet. In consectetur magna nec velit sodales posuere. Curabitur non gravida neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae elit at urna viverra ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt nisi. Ut dictum facilisis augue ac convallis. Donec egestas dolor eu nisl fringilla tempus. Curabitur ac est eu dui venenatis tincidunt et non mi. Sed quis ultrices velit. Duis porttitor elit odio. Vivamus vitae tempor justo. Suspendisse laoreet dictum ligula in viverra. Aenean bibendum turpis porttitor risus faucibus dignissim. Donec quis nunc dolor. Maecenas gravida iaculis enim quis molestie. Vestibulum mollis purus nec ex tristique feugiat. Duis interdum turpis dui, eget malesuada nisl dictum eu. In eget velit et enim egestas interdum.

Top

Step #1. This is the HTML Structure.
- Create an id or a class with your preferred name.
- On the example below the preffered named is jump_1 used in a paragraph tag.
- You may want to attached the name on most tags such as on <img id="jump_1">.

<p id="jump_1">
Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet.
</p>

<p id="jump_2">
Nunc sed mauris id nunc dictum interdum at vel nibh. Phasellus efficitur imperdiet semper. Pellentesque interdum sollicitudin elit. Suspendisse facilisis vel nisi consectetur iaculis. Nulla tincidunt elementum nulla, sit amet sollicitudin eros tempus vitae. Sed et tincidunt odio, a posuere eros. Curabitur et orci nec turpis dapibus dignissim non eget mi. Cras fringilla nisi vel augue dictum, vitae ornare lacus ultrices. Aliquam varius aliquet lectus, id mattis augue viverra sit amet.
</p>

Step #2. Now let us link that ID to a word or sentence or a paragraph.

<a href="jump_1">Jump to Jump #1</a>           Jump to Jump #1
<a href="jump_2">Jump to Jump #2</a>           Jump to Jump #2

I hope this tutorial may have helped you in learning Jump Links. If anyone find any difficulty then don't be shy to make a comment below. I'll be glad to hear them.