Breaking News: Grepper is joining You.com. Read the official announcement!

react scrollTop smooth

MD Redwan Hussain answered on August 14, 2020 Popularity 10/10 Helpfulness 5/10

answer react scrollTop smooth

related smooth scroll react

react scrollTop smooth

Comment

import React, { useEffect, useState } from "react";

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  // Top: 0 takes us all the way back to the top of the page
  // Behavior: smooth keeps it smooth!
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    // Button is displayed after scrolling for 500 pixels
    const toggleVisibility = () => {
      if (window.pageYOffset > 500) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener("scroll", toggleVisibility);

    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

//scroll-to-top classes: fixed, bottom:0, right:0
  return (
    <button
      type="button"
      className={`scrollToTop scroll-btn ${isVisible ? "show" : ""}`}
      onClick={scrollToTop} >
      <i className="far fa-arrow-up"/>
    </button>
  );
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: dev.to

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jul 25 2022

MD Redwan Hussain

0 Answers Avg Quality 2/10

Closely Related Answers

smooth scroll react

Comment

$ npm install react-scroll

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 14 2020

Philan ISithembiso

0 Answers Avg Quality 2/10

react scrollTop smooth

Contents

More Related Answers

react scrollTop smooth

Closely Related Answers

smooth scroll react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.