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
    7 Aug 07:44pm

    +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
    10 Dec, 2023 02:07am

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

  • Emeric Chen commented
    14 Jul, 2023 09:57pm

    +1

  • Alex Dixon commented
    28 Mar, 2023 01:45am

    +1 This is annoying.

  • Henry Auffahrt commented
    22 Jan, 2023 01:22pm

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