ReactJS UI Ant Diseño Componente BackTop

BackTop es un componente de Ant Design que proporciona un botón cuando el usuario se ha desplazado por la página para volver a la parte superior de la página sin necesidad de desplazarse de nuevo a la parte superior. Llevará al usuario a la parte superior de la página con una animación de desplazamiento suave.

Ant Design Library tiene este componente prediseñado y también es muy fácil de integrar. Podemos usar este componente BackTop usando el siguiente enfoque fácilmente.

Sintaxis:

<BackTop>
      Scroll to Top
</BackTop>

Volver Arriba Propiedad:

• duración : esta propiedad especifica el tiempo para volver al principio (ms)
• target : esta propiedad especifica el Node dom del área desplazable
• visibilidadHeight : esta propiedad especifica que el botón BackTop no se mostrará hasta que la altura de desplazamiento alcance este valor
• onClick : esta propiedad especifica una función de devolución de llamada, que se puede ejecutar al hacer clic en el botón

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app demo

• Paso 2 : después de crear la carpeta de su proyecto, es decir, demo, muévase a ella con el siguiente comando.

  cd demo

• Paso 3 : después de crear la aplicación ReactJS, instale la biblioteca antd con el siguiente comando.

  npm install antd

Estructura del proyecto:

Ejemplo: ahora escriba el siguiente código en el nombre de archivo App.js.

import { BackTop } from "antd";
import "./App.css";
import "antd/dist/antd.css";
  
const style = {
  height: 40,
  width: 40,
  lineHeight: "40px",
  borderRadius: 4,
  backgroundColor: "#1088e9",
  color: "#fff",
  textAlign: "center",
  fontSize: 14,
};
  
function App() {
  return (
    <div className="App">
      <div style={{ height: "600vh", 
                    padding: 8, 
                    margin: "auto 20rem" }}>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <div>Scroll to bottom</div>
        <BackTop>
          <div style={style}>UP</div>
        </BackTop>
      </div>
    </div>
  );
}
  
export default App;

Ejecutando la aplicación : Ejecute la aplicación usando el siguiente comando.

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://ant.design/components/back-top/