Technical Implementation of Smooth Scrolling to Anchors Using JavaScript

Analysis of Traditional Anchor Navigation Limitations

In traditional HTML anchor navigation, when users click links pointing to specific positions within a page, the browser immediately jumps to the target location. This abrupt visual change creates a poor user experience. While this method is simple to implement using markup like <a href="#section-id">, the lack of transition animations makes page switching appear jarring.

CSS scroll-behavior Property Solution

CSS3 introduced the scroll-behavior property, which adds smooth transition effects to scrolling operations by setting scroll-behavior: smooth. This approach is straightforward, requiring only a single line of CSS code on the container element:

html {
  scroll-behavior: smooth;
}

However, this solution has significant browser compatibility limitations. According to Can I Use data, Internet Explorer and older versions of Safari browsers do not support this property, which can be problematic in projects requiring broad browser support.

JavaScript Custom Scrolling Implementation

To achieve better browser compatibility and finer control, we can implement custom smooth scrolling functionality using native JavaScript. The core concept involves calculating the target element's position and then animating the page scroll to that position.

HTML Structure Design

First, design a proper HTML structure, assigning unique IDs to each scrollable section:

<div class="header">
  <p class="menu"><a href="#S1" onclick="scrollToSection('S1'); return false;">Section 1</a></p>
  <p class="menu"><a href="#S2" onclick="scrollToSection('S2'); return false;">Section 2</a></p>
  <p class="menu"><a href="#S3" onclick="scrollToSection('S3'); return false;">Section 3</a></p>
</div>
<div style="width: 100%;">
  <div id="S1" class="curtain">
    Section 1 content
  </div>
  <div id="S2" class="curtain">
    Section 2 content
  </div>
  <div id="S3" class="curtain">
    Section 3 content
  </div>
</div>

Note the JavaScript function call and return false in the link's onclick event, which prevents the browser's default anchor jumping behavior.

Core JavaScript Implementation

Below is the complete JavaScript implementation code, including easing functions and animation control:

<script>
function scrollTo(to, duration) {
  // Return immediately if already at target position
  if (document.body.scrollTop === to) return;
  
  const start = document.body.scrollTop;
  const diff = to - start;
  const scrollStep = Math.PI / (duration / 10);
  let count = 0;
  let currPos;
  
  const scrollInterval = setInterval(function() {
    if (document.body.scrollTop !== to) {
      count = count + 1;
      // Use cosine function for easing effect
      currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
      document.body.scrollTop = currPos;
    } else {
      clearInterval(scrollInterval);
    }
  }, 10);
}

function scrollToSection(elementId) {
  const targetElement = document.getElementById(elementId);
  if (targetElement) {
    scrollTo(targetElement.offsetTop, 500);
  }
}
</script>

Algorithm Principle Analysis

The core algorithm of this implementation is based on cosine function easing effects:

• start records the scroll starting position
• diff calculates the total scrolling distance required
• scrollStep calculates the angle increment for each step based on duration
• The cosine function 0.5 - 0.5 * Math.cos(count * scrollStep) generates easing values between 0 and 1
• setInterval executes every 10 milliseconds to achieve smooth animation effects

Performance Optimization and Compatibility Considerations

In practical applications, consider the following aspects to optimize performance and improve compatibility:

• Using requestAnimationFrame instead of setInterval provides better performance
• For modern browsers, fall back to using window.scrollTo with behavior: 'smooth' option
• Consider adding boundary checks to prevent scrolling beyond page limits
• Test touch scrolling compatibility on mobile devices

Conclusion

Implementing smooth scrolling to anchors using native JavaScript not only provides excellent browser compatibility but also allows developers complete control over scrolling animation effects. Compared to CSS solutions, JavaScript implementations are more flexible, enabling customization of easing functions, durations, and various edge case handling. This lightweight solution avoids the overhead of introducing large JavaScript libraries, offering practical technical reference for modern web development.