How to scroll an HTML page to a given anchor

Detailed navigation toolkit

scrollTo method with getBoundingClientRect joint venture

For a surgeon-like precision when executing a scroll, scrollTo combined with pageYOffset and getBoundingClientRect() is your scalpel and forceps:

const element = document.querySelector("#target-anchor");
const topPosition = element.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({
  top: topPosition,  // Setting our sights on the X-axis!
  behavior: 'smooth'  // Only the finest silk for our scroll
});


This allows micro-level control over the viewport scroll, so that your target always lands in the sweet spot.

Swift redirection using location.hash

To teleport without any scrolling animation, you can opt for location.hash:

window.location.hash = '#target-anchor';


Imagine this as the Ctrl + C of scrolling, no fluff, just right to the point!

Anchor points and positioning

HTML anchor tags with name or id attributes can serve as your landmarks:

<div id="target-anchor">Beacon of my scroll journey!</div>


Optimize your anchors' position closer to the viewport's top to avoid playing hide and seek:

#target-anchor {
  scroll-margin-top: 20px; /* AT&T cell tower kinda visibility */
}


jQuery: the one ring to rule them all

The charm of cross-browser compatibility and smooth animations can be yours with jQuery:

$('html, body').animate({
  scrollTop: $("#target-anchor").offset().top
}, 1000); // Scroll length: longer than a director's cut


This jQuery gem can turn your page scrolling into blockbuster material, complete with adjustable run time.

Working around quirks and cross-browser shenanigans

Playing nice with browsers

Different browsers - Firefox or Safari, the usual suspects - might exhibit unique scrolling quirks. Always test your code across multiple platforms to ensure a flair of uniformity.

Preparing the DOM for action

Before you call "action," ensure all elements are in their places:

document.addEventListener("DOMContentLoaded", function() {
  // Scrolls in position, and... action!
});


This is your clapperboard, making sure the scene only starts once everyone is ready.

Leveling up with CodePen examples

CodePen examples serve as your code dojo, helping you to:

• Learn from real-time demos
• Experiment and assess the cause-and-effects of your tweaks
• Share trials, errors, and victories with the coding community