0

i'm trying to implement a back-to-the-top button in my project. However, I noticed some weird behaviors in chrome on windows. then i found this post saying that it is broken since chrome and edge v81. so i tested it on browserstack. although we are describing different issues, but it does seem like the case. after two days of researching and reading through countless posts online, i don't think i've ever seen anyone mentioning the exact same problem i'm mentioning. so i do think there's just something wrong with my implementation? the problem. as you can see, on the second try, it just stopped around the halfway.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    html {
      scroll-behavior: smooth;
    }
    .a {
      height: 5000px;
    }
    .b {
      position: fixed;
      right: 2rem;
      bottom: 2rem;
    }
  </style>
  <body>
    <div class="a" id="a">This is the top</div>
    <a class="b" href="#a">to the top</a>
  </body>
</html>

so far, i've tested this on two separate windows devices and both are not working. firefox, safari, chrome (mac) both work so i guess it's related to blink? i've tried scrollTo() but got the same result.

Reyno
  • 6,119
  • 18
  • 27
Roy M
  • 1
  • 1
  • 1
  • I had the same issue. Turns out my mouse kept scrolling causing it to cancel the scroll back to the top. If I deliberately stopt my mouse wheel and then clicked the button again it worked fine. This might be the same issue – Reyno Jul 26 '23 at 06:59
  • Unable to verify - works perfectly well in Chrome & Firefox – Professor Abronsius Jul 26 '23 at 07:09
  • @Reyno yes, it definitely has something to do with it. if i only scroll by clicking on the scrollbar as compare to using the mouse wheel, the problem disappears. if you use the mouse wheel, even though the mouse wheel already comes to a full stop, the problem reappears. another thing i found interesting is that this behavior disappears whenever the component is wrapped in a – Roy M Jul 26 '23 at 15:02

0 Answers0