Replace anchor scrolling script by CSS's scroll-behavior

Handling anchor links in Javascript is not necessary anymore since scroll-behavior: smooth; allows smooth scrolling all over your site when clicking anchor links.

Additionally, the current Javascript implementation does not take into account CSS properties like scroll-margin-top or scroll-padding-top, which can cause major issues with user experience when there are fixed or sticky elements on the page (ex.: a fixed header).

Simply replacing the current Javascript implementation by a default setting of scroll-behavior: smooth; on the body element would fix these issues, and remove unneeded Javascript.

  • Émile Perron
  • Jan 26 2022
  • Darin Bellisario commented
    07 Aug 19:44

    +1 would really like to be able to use scroll-margin-top. It's also good future-proofing as CSS is only going to do more native scroll handling with time

  • Lee Frankis commented
    December 10, 2023 02:07

    +1 This is very annoying. Thought using scroll-margin-top would have been an easy fix to my sticky nav bar.

  • Emeric Chen commented
    July 14, 2023 21:57

    +1

  • Alex Dixon commented
    March 28, 2023 01:45

    +1 This is annoying.

  • Henry Auffahrt commented
    January 22, 2023 13:22

    I'm running today in the same problem. Really annoying that I cannot solve it with the simple css property: scroll-margin-top