0

I am using the react-scroll library in order to handle scrolling on my React app. I want to scroll to the top whenever a specific button is clicked, however I do not want it to scroll smoothly, which seems to be enabled by default. I have tried the following code, however the page still scrolls smoothly, though the duration changed to 2 seconds successfully. I have tried other values for the smooth property, such as easeInQuart, etc., which worked perfectly. I tried putting false in quotes as well, to no avail. 

<button onClick={() => animateScroll.scrollToTop({
      duration: 2000,
      smooth: false
    })}>
</button>

EDIT:

As Bronson pointed out below, the behavior is satisfied with the window.scrollTo method. To clarify, I was wondering why the code above does not display the same behavior, otherwise what point is there to accepting a boolean value for the smooth property if it is always enabled?

Sal
  • 1,471
  • 2
  • 15
  • 36

2 Answers2

1

If I'm understanding correctly, you just want to immediately take the user back to the top of the window? If so, you may want to just avoid using react-scroll here and just use the browser's window.scrollTo method instead:

<button onClick={() => window.scrollTo(0,0)}>
</button>
Bronson
  • 86
  • 7
  • Thanks for the answer Bronson. I am aware of the `window.scrollTo` method (which does work well for my use case), and perhaps my question wasn't as clear. I was wondering why it wasn't displaying the expected behavior. – Sal Jun 11 '20 at 20:34
1

In CSS file write this code where ever you want,

html{
  scroll-behavior: auto !important;
}
Mohammed Sajidul Islam
  • 11
  • 1