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");
  });
});