TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

↕️ React Use Window Scroll

React hooks for scrolling the page to any location, or by any amount.
Supports smooth scrolling.

npm Version  View project on GitHub  Deploy Status  Sponsor


Read the official documentation.


👁️ Live Demo


This package includes two hooks for scrolling the page to any coordinates, or by any amount. They both use the the Window Web API's scroll functions and support using ScrollToOptions for smooth scrolling implemented natively by the browser.

  • useScrollBy - Returns a function to scroll the page up or down by any amount, in pixels. Supports smooth scrolling.
  • useScrollTo - Returns a function to scroll the page to any page coordinates, in pixels. Supports smooth scrolling.

Click either of those to see a live demo (at bottom of page).

Features include:

  • 🎯 Scroll the page to any pixel coordinates, or by any pixel amount
    • Easily send your viewer to any location on the page. Great for scrolling to the top on first render, or smoothly sending to the top when reaching the bottom.
  • 😎 Native smooth scrolling support
  • 🧮 Legacy browser support
    • Includes polyfill to support browsers that lack native smooth scrolling support (I'm looking at you, Safari!)
  • 🤏 Low overhead
  • 🛡️ Safely access the Window Web API
    • Accessing window haphazardly in React is considered sloppy. These hooks follow the React paradigm of containing side-effects.


I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship.

Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.

Sponsor via GitHub Buy me a coffee Buy me 3 coffees Buy me 5 coffees

Table of Contents


npm i react-use-window-scroll

Quick Start


import * as React from "react";
import { useScrollBy } from "react-use-window-scroll";

const HookExample = () => {
  const scrollBy = useScrollBy();
  return (
      {/* Hard scroll down by 200 pixels */}
      <button onClick={() => scrollBy(200, 0)}>Hard Scroll By 200</button>
      {/* Smooth scroll down by 200 pixels */}
        onClick={() => scrollBy({ top: 200, left: 0, behavior: "smooth" })}
        Smooth Scroll By 200
      </button> ...

Read full useScrollBy docs.


import { useScrollTo } from "react-use-window-scroll";

const HookExample = () => {
  const scrollTo = useScrollTo();
  return (
    <div style={{ border: "solid 2px #67788a", padding: "20px" }}>
      {/* Hard scroll to the top */}
      <button onClick={() => scrollTo(0, 0)}>
        Hard Scroll To Top (0, 0)
      </button> {/* Smooth scroll to the top */}
      <button onClick={() => scrollTo({ top: 0, left: 0, behavior: "smooth" })}>
        Smooth Scroll To Top (0, 0)

Read full useScrollTo docs.


Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.


Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉






Package Sidebar


npm i react-use-window-scroll

Weekly Downloads






Unpacked Size

244 kB

Total Files


Last publish


  • justinmahar