Jumping to an anchor on page
- 11 Jan 2024
- 1 Minute to read
- Print
- DarkLight
- PDF
Jumping to an anchor on page
- Updated on 11 Jan 2024
- 1 Minute to read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
To jump/scroll to an anchor on a page you must use javascript. This allows you to account for the height of the header.
Step 1: Add an ID to the element you’d like to jump/scroll to
<div id="scroll-id"><p>My Element!</p></div>
Step 2: Add the ID to your link
<a href="#scroll-id">Click to Scroll<a/>
Step 3: Add the “scroll_to” class to your link
<a href="#scroll-id" class="scroll_to">Click to Scroll<a/>
Step 4: Add the following javascript to the bottom of the website footer
<script>
$(function () {
$('a.scroll_to ').click(function (e) {
e.preventDefault();
var target = $(this.hash);
$('html, body').animate({
scrollTop: target.offset().top - 150 // scroll to id minus approx. height of header
}, 10);
return false;
});
});
</script>
Was this article helpful?