React semantic ui react sticky back to top button năm 2024

Enter fullscreen mode Exit fullscreen mode

For the styles 💅 I worked with SASS: my button only has a display:block; and the goTop__text class has everything else: position, colours, size, shadows and a little hover action. Don't forget to make it fixed!

Step one: done.

✔️ Create and style the button

Hearing the user position 👂 and showing the button

For the button to render we need to know where the user is. We don't want the button to show if there's no way up to go 🛑

So we will start declaring our scroll position with an initial state of 0 const [scrollPosition, setSrollPosition] = useState[0];

Now, as we also need to show or hide the button, we will declare another state, this time for the "showing". const [showGoTop, setshowGoTop] = useState["goTopHidden"];.

In my oppinion, I think the easiest way to manage this state is to add one or other class, having the "goTopHidden" class with a display: none; style and a "goTop" class that, as you have seen before states a

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

0 that makes it visible.

This will be sent 📤 via prop to my component so the div that wraps up the button, receives the corresponding class.

Handle the display 👀

This handler will set new states to the states we just declared. For doing so, we are gonna use the

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

1 this property "returns the number of pixels that the document is currently scrolled vertically" read more...

So first thing first, our handler will take this information and set it in our position state. Now that we know where our user is🙋, we can tell the handler that when the user reaches a certain position something must happen. According to our code it will change the class that hides our button.

As you can see on the code below, when the scrollPosition is greater than 50 [px] it will change the element class to "GoTop" else, it will set the class that hides the button.

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

Enter fullscreen mode Exit fullscreen mode

To wrap up this step we will add an eventListener to our window that will trigger the method. For this we will need to use the useEffect Hook with a simple

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

2 that will call our handleVisibleButton method.

//SCROLL LISTENER
useEffect[[] => {
    window.addEventListener["scroll", handleVisibleButton];
  }];

Enter fullscreen mode Exit fullscreen mode

Step two: done.

✔️ Hear the user position and handle the display

Handling the scroll action🖱️

This handler will be triggered by the user click and its function is very simple: to scroll up the user.

In order to do this we will need to use another Hook: useRef[], that we will declare in a constant

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

3

Having this constant declared now we have to call it in our JSX in the element we want to use as reference. Understanding that we want to send the user all the way up, we will have to call it in an element that is in the top of our page 🔝

I decided to add a

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

4 tag on top of everything as reference.

//REF IN JSX
function App[] {
 //code
  return [
    
      
 
      
      
     
  ];
}
export default App;

Enter fullscreen mode Exit fullscreen mode

Now it comes the last step: our handling method. In our method we will have to use the property

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

5 of our Hook. As we referenced an element of our DOM, React will assign that element as "current".

We also will need to use the

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

6 method. This method will make that the element on which scrollIntoView[] is called is visible to the user.

So our handling method will use the reference we created and with the scrollIntoView, we will be able to actually scroll our user all the way to the top.

Our function will look like this:

//SCROLL UP HANDLER
const handleScrollUp = [] => {
    refScrollUp.current.scrollIntoView[{ behavior: "smooth" }];
  };

Enter fullscreen mode Exit fullscreen mode

P.D: I added a

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

7 because we want the scroll to look soft.

Step three: done.

✔️ Handle the scroll-to-top action

Sending everything via props ✈️

Now that all the things are in motion we have to send via props two things: the state for the button, so it changes correctly and the handleScrollUp funcion that we will call onClick.

//DISPLAY HANDLER
const handleVisibleButton = [] => {
    const position = window.pageYOffset;
    setSrollPosition[position];
    if [scrollPosition > 50] {
      return setshowGoTop["goTop"];
    } else if [scrollPosition < 50] {
      return setshowGoTop["goTopHidden"];
    }
  };

8

//PROPS
const GoTop = [props] => {
  return [
    
      

      //BUTTON CODE
    
  ];
};
export default GoTop;

Enter fullscreen mode Exit fullscreen mode

Step four: done.

✔️ Send props to component

It's done 🎆🎇

After this four steps you should have a Go-to-Top button that is totally functional💯

This is my take for the Go-to-Top Button in React using functional components. I really hope this works for you and if you have any question, feel free to ask so, if I have the answer I'll answer and if not...we can Google it together 😅