0

When I click on a nav link in my project I run the following function to scroll to that part of the page:

const goTo = section => {
    switch(section) {
      case "home":
        return window.scrollTo({ top: 0, left: 0, behavior: 'smooth'})

      case "about":
        return aboutRef.current.scrollIntoView({
          behavior: "smooth"
        });

      case "projects":
        return projectsRef.current.scrollIntoView({
          behavior: "smooth"
        });

      case "experience":
        return experienceRef.current.scrollIntoView({
          behavior: "smooth"
        });

      case "contact":
        return contactRef.current.scrollIntoView({
          behavior: "smooth"
        });

      default:
        return window.scrollTo({ top: 0, left: 0, behavior: 'smooth'})
    }
  }

This works fine however but when I scroll to a section, the top is cut off by my fixed navbar. Is there anyway to incorporate an offset into the scrollIntoView method?

BranOIE
  • 400
  • 4
  • 19
  • Workarounds can be found in [this answer](https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far). – Chris B. Jan 19 '22 at 00:34
  • Does this answer your question? [scrollIntoView Scrolls just too far](https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far) – Chris B. Jan 19 '22 at 00:34

0 Answers0