Jumping to an anchor on page
  • 11 Jan 2024
  • 1 Minute to read
  • Dark
    Light
  • PDF

Jumping to an anchor on page

  • Dark
    Light
  • PDF

Article summary

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?