TypeScript: Scrolling to a specific location

Introduction

Scrolling to a specific location on a webpage can significantly enhance user experience, allowing for quick navigation and access to content. This functionality is especially crucial in single-page applications (SPAs) or pages with lengthy content. By leveraging TypeScript, developers can gain stronger typing benefits, making the code more maintainable and less prone to runtime errors.

Implementing smooth scrolling on a website not only improves the user interface but also guides users seamlessly to specific content. TypeScript, a typed superset of JavaScript, aids in this process by ensuring that our scrolling logic is easy to understand and error-free. Let’s dive into how you can accomplish this with TypeScript.

Basic Scrolling Technique

The simplest way to scroll to a particular element on the page is by using the scrollIntoView method. This method provides a smooth and easy transition to the desired part of your webpage.

document.getElementById('yourElementId')?.scrollIntoView({
 behavior: 'smooth'
});

In TypeScript, ensure you check for nullability of the element as TypeScript aims to catch errors during development rather than runtime. This makes your code more robust and less prone to unexpected failures.

Scrolling Based on Location Hash

Another common scenario is scrolling to an element based on the URL hash. When a user lands on a page with a certain hash in the URL, the page automatically scrolls to the corresponding element.

const scrollToElementFromHash = () => {
 const hash = window.location.hash;
 if (hash) {
   const targetElement = document.querySelector(hash);
   targetElement?.scrollIntoView({
     behavior: 'smooth'
   });
 }
};

window.addEventListener('DOMContentLoaded', scrollToElementFromHash);

This approach not only handles direct URL entries but also integrates well with SPA routing, where navigation might change the URL without reloading the page.

Custom Scroll Function with TypeScript

For a more controlled scrolling experience, you might want to create a custom scrolling function. This function could take parameters like the target element and additional options like offset or speed.

type ScrollOptions = {
 target: Element;
 offset?: number;
 speed?: number; // Speed in pixels per second
};

const smoothScrollTo = ({ target, offset = 0, speed = 200 }: ScrollOptions): void => {
 const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
 const startPosition = window.pageYOffset;
 const distance = targetPosition - startPosition - offset;
 let startTime: number | null = null;

 const animation = (currentTime: number) => {
   if (!startTime) startTime = currentTime;
   const timeElapsed = currentTime - startTime;
   const nextStep = easeInOutQuad(timeElapsed, startPosition, distance, speed);

   window.scrollTo(0, nextStep);
   if (timeElapsed < speed) requestAnimationFrame(animation);
 };

 requestAnimationFrame(animation);
};

const easeInOutQuad = (t: number, b: number, c: number, d: number): number => {
 t /= d/2;
 if (t < 1) return c/2*t*t + b;
 t--;
 return -c/2 * (t*(t-2) - 1) + b;
};

This function, smoothScrollTo, allows for a custom, smooth scrolling animation. The easeInOutQuad function is a typical easing function used to create a more natural movement. Note how TypeScript’s type annotations aid in specifying the structure of options and improving the function’s readability.

Conclusion

Scrolling to a specific location on a webpage can dramatically improve user experience. TypeScript makes implementing this functionality more reliable, ensuring that the types of variables and parameters are correctly maintained. With the basics, URL hash-based scrolling, and a custom TypeScript function for smooth scrolling, you have a versatile toolkit for enhancing your web applications. Always remember, the goal of these implementations is to make content more accessible and navigable for users, thereby improving overall engagement and satisfaction.