Search code examples
javascriptjqueryhtmlcsssmoothing

The smooth scrolling on my website doesn't work correctly

I would like to make my navbar links to smooth scroll to their chosen link (destination). The problem is that they don't work properly. They always scroll to home even if I click on a different navbar option. For example, if I start at home and click to about, then it will work correctly. If I click from about to any other option except home, then it won't work correctly. It seems like the home anchor is the only one working. Any ideas?

EDIT: SOLVED

Solution

  • The JQuery doesn't work because offset() appears to be relative to the screen coordinates in your case. Don't worry though; there's an even simpler solution for the scrolling.

    body {
    scroll-behavior: smooth;
}

    Put this in your CSS and the browser will animate the scrolling for you.

    Just be sure to check the browser support: https://caniuse.com/#feat=css-scroll-behavior