Page jumping, anchor links or jump links

7. Page jumping or jump links

Page jumping, anchor links or jump links are HTML elements used to create clickable links within a web page. They allow users to navigate to different sections of the same page or to external pages by clicking on the link text or associated element.

7.1. How to create an jump link

To create a jump link, follow these steps:

1. Identify the section or element within the HTML document where you want to create the anchor.
2. Within that section or element, add an <a> tag with the name attribute.
3. Assign a unique value to the name attribute to identify the anchor point. For example: <a name="section1"></a>
4. Place the content or text that you want to link to this anchor within the same HTML document.
5. To create a link that points to the anchor, use the href attribute in another <a> tag. For example: <a href="#section1">Go to Section 1</a>

When a user clicks on this link, the browser will scroll to the section with the corresponding name attribute, allowing them to quickly navigate to that specific part of the page.

Example

<a href="#nombre_marcador1">Title 1</a> | 
<a href="#nombre_marcador2">Title 2</a> | 
<a href="#nombre_marcador3">Title 3</a> | 
<a href="#nombre_marcador4">Title 4</a>

<a name="nombre_marcador_arriba"></a>
<h3>HTML Bookmarks</h3>
  
<a name="nombre_marcador1"></a>
<h4>Title 1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. Repellat officiis ex vitae. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
   
<a name="nombre_marcador2"></a>
<h4>Title 2</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  
<a name="nombre_marcador3"></a>
<h4>Title 3</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. </p>
   
<a name="nombre_marcador4"></a>
<h4>Title 4</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. Repellat officiis ex vitae.</p>
  
<a href="#nombre_marcador_arriba">Go to top</a>

CodePen example

0

7.2. How to create an anchor link that can be accessed from another page

To create anchors links that can be accessed from another page, you can follow these steps:

1. Identify the section or element within the HTML document where you want to create the anchor, as described in the previous explanation.
2. Within that section or element, add an <a> tag with the name attribute, just like before. For example: <a name="section1"></a>.
3. Save the HTML document with the anchor as a separate file, such as page1.html.
4. In the HTML document where you want to link to the anchor from another page, create an <a> tag with the href attribute pointing to the file and the anchor name. For example: <a href="page1.html#section1">Go to Section 1</a>.
5. When a user clicks on this link in the second HTML document, it will open page1.html and automatically scroll to the section with the corresponding name attribute, providing a seamless navigation experience across different pages.

By using this approach, you can create anchors in one HTML document and link to them from multiple other pages, allowing users to easily access specific sections of the referenced document.

Test

Test