How to Smoothly Scroll Within a Page When Clicking the “Back to Top” Button (Anchor Link)

When browsing a web page, having a “Back to Top” button after scrolling through a long page can be very convenient. Also, anchor links that allow smooth movement to specific areas within the page are important features that improve user convenience.

However, with normal anchor links, clicking causes an abrupt jump, which feels unnatural. In this article, we’ll show you how to implement smooth scrolling. You can achieve comfortable in-page navigation using only jQuery and simple JavaScript—be sure to give it a try!

This is similar to the content introduced in our previous article: Guide to Implementing Smooth Scroll for Page Anchors with jquery.page-scroller.js.

CSS for Smooth Scrolling Within a Page When Clicking the “Back to Top” Button (Anchor Link)

*This is the CSS for the anchor destination areas within the page. There are four anchor destinations (#a1 to #a4), and a “↑Back to Page TOP” button is provided at the bottom of the page. Please modify as needed.

<style type="text/css">
<!--
body {
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
}
h1 {
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #000000;
}
p {
  color: #000000;
  font-size: 18px;
}
#a1 {
  height: 500px; width: 100%; background-color: #cccccc;
}
#a2 {
  height: 1000px; width: 100%; background-color: #333333;
}
#a3 {
  height: 2000px; width: 100%; background-color: #424251;
}
#a4 {
  height: 800px; width: 100%; background-color: #000000;
}
.topback {
  width: 100%;
  height: 60px;
  text-align: center;
  background-color: #FFFF73;
  margin: 0 auto;
}
.topback a {
  line-height: 60px;
  display: block;
}
-->
</style>

JavaScript for Smooth Scrolling Within a Page When Clicking the “Back to Top” Button (Anchor Link)

*Loads jquery.min.js and jquery.easing.min.js. Retrieves all anchor tags in the page and smoothly scrolls to the vertical position of the linked content based on its height from the browser viewport.*

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
  // Get all a tags with href starting with #
  const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
  // Add click event to each a tag
  for (let i = 0; i < smoothScrollTrigger.length; i++) {
    smoothScrollTrigger[i].addEventListener('click', (e) => {
      // Get anchor target position
      e.preventDefault();
      let href = smoothScrollTrigger[i].getAttribute('href'); // get link destination
      let targetElement = document.getElementById(href.replace('#', '')); // get anchor destination element

      const rect = targetElement.getBoundingClientRect().top; // get height from browser
      const offset = window.pageYOffset; // current scroll position
      const gap = 10; // adjustment for fixed headers
      const target = rect + offset - gap; // final scroll position

      // Scroll to anchor destination
      window.scrollTo({
        top: target,
        behavior: 'smooth',
      });
    });
  }
});
</script>

HTML for Smooth Scrolling Within a Page When Clicking the “Back to Top” Button (Anchor Link)

*There are four anchor destination areas (#a1 to #a4), and a “↑Back to Page TOP” button is provided at the bottom. Modify as needed.*

<h1 id="a0">Clicking the “↑Back to Page TOP” button or in-page anchor links enables smooth scrolling within the page.</h1>
<p>Click the following “Move to a1–a4 area ↓” links to jump to each section within the page.</p>
<div style="padding-bottom: 20px;"><a href="#a1">Move to a1 area ↓</a>　<a href="#a2">Move to a2 area ↓</a>　<a href="#a3">Move to a3 area ↓</a>　<a href="#a4">Move to a4 area ↓</a></div>

<div id="a1">a1 area</div>
<div id="a2">a2 area</div>
<div id="a3">a3 area</div>
<div id="a4">a4 area</div>
<div class="topback"><a href="#a0">↑Back to Page TOP</a></div>

Demo Page: Smooth Scrolling Within the Page When Clicking the “↑Back to Page TOP” Button or Anchor Links

Demo page for smooth scrolling with “↑Back to Page TOP” and anchor links

Conclusion

By using the method introduced in this article, you can implement a “Back to Top” button and in-page anchor links with smooth scrolling animation. This improves the user experience and helps create a more comfortable website.

Especially for smartphone users, it reduces the hassle of scrolling through long pages. Since it’s easy to implement with jQuery, try adding it to your own site!

　

*Please use this method at your own discretion when reusing.
Do not reuse the Google Analytics tag in the demo page’s <head> tag.*