Clicking a link (e.g., "Back to top" or anchor link) should smoothly scroll to a target element with an offset for fixed headers. Native
scrollIntoView doesn't support offset or custom easing.
scrollToElement(options) calculates target position (element offset minus offset amount) and performs smooth scrolling using
requestAnimationFrame with configurable easing and duration. This demo uses an offset of 80px (to account for the fixed header)
and 500ms duration.
AnchorLink, BackToTopButton, TableOfContents, BreadcrumbScroll, WizardStepScroll
Click the "Intro" button above to smoothly scroll here with an offset (so the section appears below the fixed header). Duration is 500ms.
Scroll to this section using the "Features" button. The offset prevents the header from covering the title.
Demonstrates smooth scrolling with custom easing (easeInOutCubic).
Even the last section scrolls correctly. The "Top" button uses scrollToTop to return to the top of the page.