Crear un botón de desplazamiento en Nextjs

A medida que la longitud del contenido de las publicaciones aumenta, surgió el problema de que hay que desplazarse mucho hacia arriba para moverse a otra publicación.

Al principio, pensé en fijar la barra de navegación en la parte superior, pero considerando que la mayoría de los accesos ahora son principalmente desde dispositivos móviles, pensé que sería importante usar la pantalla de manera óptima.

Así que simplemente hice un botón para desplazarse al principio.

"use client";

import { ChevronDoubleUpIcon } from "@heroicons/react/20/solid";

export default function MoveToTopBtn() {
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth", // Efecto de desplazamiento suave
    });
  }
  return (
    <div className="fixed right-6 bottom-6">
      <div
        className="bg-opacity-45 bg-white rounded-full border p-2"
        onClick={scrollToTop}
      >
        <ChevronDoubleUpIcon className="text-gray-500 size-5 font-black stroke-1 stroke-gray-500" />
      </div>
    </div>
  );
}

El contenido es muy simple.

Se mueve suavemente hacia la parte superior usando window.scrollTo.

Y lo fijé para que aparezca en la esquina inferior derecha de la pantalla, utilizando className.

Si haces clic, se mueve bien hacia la parte superior.