I want to make a button that send me to the bottom of the page-CodePudding

Can somebody tell me how to make a button and when I clicked it to send me to the bottom of the page with REACT.JS.

Thanks

CodePudding user response：

You can use the window.scrollTo method scrollTo

const scrollToBottom = () => {
  const windowHeight = window.innerHeight
  window.scrollTo(0, windowHeight)
}

<button onClick={scrollToBottom}>Scroll</button>

CodePudding user response：

Your question is mostly related to Javascript, you can add this function to your React's component.

You can give it a try here

https://codesandbox.io/s/react-playground-forked-qzkynv?file=/index.js

goToBottom() {
   window.scrollTo(0,document.body.scrollHeight);
}

The button can be styled by CSS

<button onClick={goToBottom}>Go to the bottom</button>

To have smooth scrolling, you can add this to your global styles

html {
  scroll-behavior: smooth;
}