Skip to content

JavaScript Smooth Scrolling

المعرفة:: JavaScript
الحالة:: ملاحظة_مؤرشفة
المراجع:: The Complete JavaScript Course 2022 From Zero to Expert, Build Responsive Real-World Websites with HTML and CSS Study Notes

Using JavaScript to do smooth scrolling

  • Using window.scrollTo we can scroll to a particular set of coordinates in the document.
  • Usually the two coordinates are left and top.
  • window.scrollTo also accepts an options object with top, left, and behavior key-values.
  • behavior is set to auto by default, but it can be set to smooth.
  • Alternatively, a modern way of doing the same is to use scrollIntoView on any element with behavior set to smooth. 
// Scrolling  
const section1 = document.querySelector('#section--1');  
const s1coords = section1.getBoundingClientRect();  

// Without options  

// element position + current scroll  
window.scrollTo(  
  s1coords.left + window.pageXOffset,  
  s1coords.top + window.pageYOffset  
);  

// With options  
window.scrollTo({  
  left: s1coords.left + window.pageXOffset,  
  top: s1coords.top + window.pageYOffset,  
  behavior: 'smooth',  
});  

// The modern way  
section1.scrollIntoView({ behavior: 'smooth' });

Example

const headerEl = document.querySelector(".header");  
const allLinks = document.querySelectorAll("a:link");  

allLinks.forEach(function (link) {  
  link.addEventListener("click", function (e) {  
    e.preventDefault();  
    const href = link.getAttribute("href");  

    // Scroll back to top  
    if (href === "#")  
      window.scrollTo({  
        top: 0,  
        behavior: "smooth",  
      });  

    // Scroll to other links  
    if (href !== "#" && href.startsWith("#")) {  
      const sectionEl = document.querySelector(href);  
      sectionEl.scrollIntoView({ behavior: "smooth" });  
    }  

    // Close mobile naviagtion  
    if (link.classList.contains("main-nav-link")) headerEl.classList.toggle("nav-open");  
  });  
});
Last update : August 14, 2023
Created : August 23, 2022

Comments

Comments