Web APIs (navigator, geolocation, history)

What aspect of the History API is being demonstrated in Option 2?

const scrollOptions = {
  top: 1000,
  left: 0,
  behavior: 'smooth'
};

document.getElementById('scrollBtn').addEventListener('click', function() {
  // Option 1
  window.scrollTo(scrollOptions);
  
  // Option 2 - update history
  const scrollPosition = 1000;
  window.scrollTo(scrollOptions);
  history.pushState({scrollY: scrollPosition}, '', '#section-' + scrollPosition);
});

// Handle history navigation
window.addEventListener('popstate', function(event) {
  if (event.state && event.state.scrollY !== undefined) {
    window.scrollTo({
      top: event.state.scrollY,
      behavior: 'smooth'
    });
  }
});

How to prevent scrolling when navigating through history
How to associate scroll positions with history entries for restoration
Option 2 demonstrates associating scroll positions with history entries: 1) It saves the current scroll position (scrollY) in the state object of the history entry, 2) It updates the URL hash to reflect the section, making it bookmarkable, 3) The popstate handler restores the scroll position when navigating through history, 4) This creates a better user experience by maintaining context when using browser navigation, 5) Without this approach, the browser might scroll to a different position when navigating back, 6) This pattern is particularly important for content-heavy sites where maintaining scroll position enhances usability, 7) The code combines smooth scrolling for a polished feel with history management for proper navigation, 8) This represents a common pattern in single-page applications to handle scroll restoration during history navigation.
How to automatically save scroll position
How to override the browser's default scroll behavior

Next Question (34/40)