Link to an element within the current page [closed]
You need to create an anchor for the link. The modern way of doing this is to give the appropriate element an id="Content"
attribute. The older way of doing this was to use <a name="Content"></a>
.
Give the element you want to 'jump' to a clear ID, like so:
<p id="idOfTag">Your content goes here</p>
Then in the link on the top of the page, make it refer to the id of that element (mind the #
):
<a href="#idOfTag">Jump</a>
Full example with multiple links:
<ul>
<li><a href="#contentParagraph">Content</a></li>
<li><a href="#mainPageParagraph">Main page</a></li>
<li><a href="#documentParagraph">Document</a></li>
<li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
<h4>Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
<h4>Main page</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
<h4>Document</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
<h4>Expenses</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
You can use name
attribute for your anchor
tag to achieve this.
Let say you have a div
with id content
<div id="content">This is my div</div>
Next make sure you have a anchor
tag with name
attribute same as the id
of the div
content
<a href="#" name="content">Click to go to the top</a>
Live Demo.
Scroll down to see the link
Another approach to do this would be
<div id="content">My div</div>
Then your anchor tag's href should be #content
<a href="#content">Click to go to top</a>
Live Demo.