JavaScript Desplazarse hacia arriba

Usa window.scrollTo(0, 0) para llevar la página actual al principio. Para vincular esta acción a un botón, añade un controlador de clic; pasa { top: 0, behavior: "smooth" } si quieres que el navegador anime el desplazamiento.

Usa window.scrollTo() para volver al principio

Este ejemplo crea un botón y lo vincula a window.scrollTo(). Coloca el script en la página después de que el cuerpo del documento esté disponible o cárgalo con defer para que el botón pueda añadirse al documento. Los pequeños objetos alternativos permiten ejecutar el ejemplo en un entorno de prueba de Node; en un navegador, usa el document y el window reales de la página.

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
  body: {
    append(button) {
      button.click = () => button.listeners.click();
    }
  },
  createElement() {
    return {
      listeners: {},
      addEventListener(name, handler) {
        this.listeners[name] = handler;
      }
    };
  }
};
const pageWindow = inBrowser ? window : {
  scrollTo(x, y) {
    console.log(`scrollTo(${x}, ${y})`);
  }
};

const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);

button.addEventListener("click", () => {
  pageWindow.scrollTo(0, 0);
});

if (!inBrowser) button.click();

scrollTo(0, 0)

Los dos argumentos indican las posiciones de desplazamiento horizontal y vertical. Si estableces ambos en 0, la página vuelve a la esquina superior izquierda. Usa esta forma de desplazamiento inmediato cuando quieras que el salto ocurra al instante, por ejemplo, después de una acción breve en la que una animación podría distraer.

Añade un desplazamiento suave con window.scrollTo()

Pasa un objeto de opciones a window.scrollTo() para solicitar un desplazamiento suave. Esta versión independiente usa el mismo objeto alternativo pequeño para Node, de modo que el controlador de clics se puede mostrar fuera de un navegador:

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
  body: {
    append(button) {
      button.click = () => button.listeners.click();
    }
  },
  createElement() {
    return {
      listeners: {},
      addEventListener(name, handler) {
        this.listeners[name] = handler;
      }
    };
  }
};
const pageWindow = inBrowser ? window : {
  scrollTo(options) {
    console.log(`scrollTo(top: ${options.top}, behavior: ${options.behavior})`);
  }
};

const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);

button.addEventListener("click", () => {
  pageWindow.scrollTo({ top: 0, behavior: "smooth" });
});

if (!inBrowser) button.click();

scrollTo(top: 0, behavior: smooth)

La propiedad top establece el destino vertical, y behavior: "smooth" solicita al navegador que anime el desplazamiento. La forma nativa con opciones no permite establecer una duración. Si necesitas una duración concreta, usa la animación de una biblioteca o implementa una animación personalizada. Una regla CSS para toda la página, como html { scroll-behavior: smooth; }, también puede suavizar los desplazamientos normales, pero por sí sola no crea un botón ni una acción para volver al principio.

Usa un enlace de anclaje para saltar al principio

Un anclaje es una opción útil que no requiere scripts. Asigna un ID al inicio de la página, por ejemplo, <header id="page-top">, y luego crea un enlace con <a href="#page-top">Back to top</a>. Al activar el enlace, se navega al fragmento, se actualiza el fragmento de la URL y el navegador mueve el foco o la navegación al destino según su comportamiento. El texto visible «Back to top» del ejemplo permanece en inglés. Elige un destino que aparezca una sola vez en la página; si un encabezado fijo lo tapa, tenlo en cuenta con CSS, por ejemplo, aplicando scroll-margin-top al destino.

Usa jQuery para volver al principio

Si la página ya carga jQuery, su método animate() puede animar la propiedad scrollTop de los elementos de desplazamiento del documento. Este ejemplo añade un botón y vincula la animación. En un navegador, carga jQuery antes de este script; si no está disponible, el ejemplo genera un error claro. El objeto alternativo pequeño se usa solo en el entorno de prueba de Node.

const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
if (inBrowser && typeof globalThis.jQuery !== "function") {
  throw new Error("jQuery is required for this example. Load jQuery before this script.");
}

const $ = inBrowser ? globalThis.jQuery : (selector, attributes) => {
  if (selector === "<button>") {
    return {
      ...attributes,
      appendTo() { return this; },
      on(name, handler) { this.handler = handler; return this; }
    };
  }
  return {
    animate(properties, duration) {
      console.log(`animate(scrollTop: ${properties.scrollTop}, duration: ${duration})`);
    }
  };
};

const button = $("<button>", {
  type: "button",
  text: "Back to top"
}).appendTo("body");

button.on("click", () => {
  $("html, body").animate({ scrollTop: 0 }, 800);
});

if (!inBrowser) button.handler();

animate(scrollTop: 0, duration: 800)

En este caso, scrollTop: 0 es el destino y 800 es la duración de la animación, en milisegundos. jQuery es una dependencia opcional; usa el método nativo si la página no necesita ya esta biblioteca. Si añades una animación personalizada u otros efectos de movimiento, respeta la preferencia del visitante por reducir el movimiento.

Elige el enfoque adecuado

Usa window.scrollTo(0, 0) para saltar directamente al principio desde JavaScript. Elige la forma con opciones cuando convenga un desplazamiento suave y sea suficiente una duración controlada por el navegador. Usa un anclaje cuando la acción deba funcionar como navegación normal de la página, sin JavaScript. Elige jQuery si ya forma parte del proyecto y su argumento de duración se ajusta a la interacción. En una aplicación de página única, llama al método nativo después de que cambie la ruta o la vista si la aplicación no administra ya la posición de desplazamiento. Para un enlace o botón normal, deja claro su propósito para las tecnologías de asistencia y asegúrate de que se pueda activar con el teclado.