Implementing Smooth Scroll in JavaScript

TL;DR: Implementing smooth scroll in JavaScript involves querying the DOM for the target element, calculating initial and current positions, setting up an animation loop with requestAnimationFrame(), defining an easing function for smooth animation, and triggering the animation with event listeners. Follow these steps to create a seamless scrolling experience on your web pages. Here's a simple implementation of this feature: https://infinity-scrollertest.netlify.app/

Are you tired of the abrupt and jarring jumps when navigating through sections on a webpage? If so, you're not alone! Smooth scrolling is a popular web design feature that provides a seamless and visually appealing scrolling experience. In this blog, we'll explore how to implement smooth scroll using JavaScript, using the code provided as a reference.

Smooth scrolling can be achieved through JavaScript by animating the scroll position from the current position to the target position over a period of time. This is done by utilizing the window.scrollTo() method, which allows us to scroll the window to a specific position.

Smooth scrolling is a technique that animates the scroll position of a webpage, creating a smooth and visually appealing scrolling experience for users. Here's how you can implement it:

Step 1: Query the DOM for the target element to scroll to. You can use methods like document.getElementById(), document.querySelector(), or document.getElementsByClassName() to select the target element. For example:

var target = document.querySelector('.section2');

Step 2: Calculate the initial and current positions of the target element and the window's scroll position. You can use methods like element.getBoundingClientRect().top and window.pageYOffset to get the positions. For example:

var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;

Step 3: Calculate the distance between the target position and the current position. You can subtract the initial position from the target position to get the distance. For example:

var distance = targetPosition - startPosition;

Step 4: Set up an animation loop using the requestAnimationFrame() method. This method allows you to create a smooth animation loop that updates the scroll position at each frame. For example:

function animation(currentTime) {
  // Calculate time elapsed and new scroll position
  var timeElapsed = currentTime - startTime;
  var run = easeInQuad(timeElapsed, startPosition, distance, duration);

  // Update scroll position
  window.scrollTo(0, run);

  // Continue animation until duration is reached
  if (timeElapsed < duration) {
    requestAnimationFrame(animation);
  }
}

Step 5: Define an easing function. Easing functions determine the rate of change of a value over time, creating a smooth animation effect. You can use various easing functions, such as linear, quadratic, cubic, etc. Here's an example of a quadratic easing function:

function easeInQuad(t, b, c, d) {
  t /= d;
  return c * t * t + b;
}

Step 6: Trigger the smooth scroll animation by adding event listeners to the buttons or links that will initiate the smooth scroll. For example:

var sectionButton = document.querySelector('.section1');
sectionButton.addEventListener('click', function() {
  smoothScroll('.section2', 1000);
});

var sectionButton2 = document.querySelector('.section2');
sectionButton2.addEventListener('click', function() {
  smoothScroll('.section1', 1000);
});

Note: The smoothScroll() function is assumed to be defined based on the previous code provided, which includes the calculation of targetPosition, startPosition, distance, startTime, and the requestAnimationFrame() loop. This function takes a target element and a duration as parameters and animates the smooth scroll to the target element over the specified duration.