Scroll to top of page in React.js
In React, use window.scrollTo()the method to scroll to the top of the page, for example window.scrollTo(0, 0).
method on the window object scrollToto scroll to a specific set of coordinates in the document.
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
// 👇️ scroll to top on page load
window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
}, []);
return (
<div>
<h2>Top of the page</h2>
<div style={{height: '155rem'}} />
{/* 👇️ scroll to top on button click */}
<button
onClick={() => {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
}}
style={{
position: 'fixed',
padding: '1rem 2rem',
fontSize: '20px',
bottom: '40px',
right: '40px',
backgroundColor: '#0C9',
color: '#fff',
textAlign: 'center',
}}
>
Scroll to top
</button>
</div>
);
}
The examples in the code sample show how to:
- Scroll to the top of the page after rendering the component.
- Click the button to scroll to the top of the page.
window.scrollToMethod scrolls to a specific set of coordinates in the document.
<button
onClick={() => {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
}}
>
Scroll to top
</button>
It takes an object whose topproperty specifies Ythe number of pixels to scroll the window along the axis.
leftProperty specifies Xthe number of pixels by which the window is scrolled on the axis.
behaviorProperty specifies whether scrolling should be animated smoothly (smooth), or occur immediately (auto).
behaviorThe default value of the property is auto .
If we need to scroll to the top of the page after the component has rendered, we can use useEffectthe <head> hook.
useEffect(() => {
// 👇️ scroll to top on page load
window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
}, []);
We pass an empty
dependenciesarray to the hook, so it will only run on the initial render.
If we need to scroll to the top of the page when the button is clicked, set onClickthe attribute on the element and pass it a function.
This function should call window.scrollTo()the method, just like we useEffectdid in the hook.
For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.
Related Articles
Using onChange event in React
Publish Date：2025/03/03 Views：148 Category：React
-
onChange 是 React 中最常见的输入事件之一。本文将帮助你了解它的工作原理。
Checkbox onChange in React
Publish Date：2025/03/03 Views：73 Category：React
-
本教程演示了如何从 React 中 onChange 事件的复选框发送值。
onDoubleClick in React
Publish Date：2025/03/03 Views：128 Category：React
-
本教程演示了如何在 React 中使用 onDoubleClick。
Show element or text on hover in React
Publish Date：2025/03/03 Views：186 Category：React
-
在 React 中悬停时显示元素或文本： 在元素上设置 onMouseOver 和 onMouseOut 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染另一个元素。 import {useStat
Applying global CSS styles in React applications
Publish Date：2025/03/03 Views：145 Category：React
-
要在 React 应用程序中应用全局 CSS 样式，请将 CSS 写入扩展名为 .css 的文件中，并将其导入 index.js 文件中。 全局 CSS 应该在 index.js 中导入，以确保它被加载到你的 React 应用程序的所有
Passing events and parameters to onClick in React
Publish Date：2025/03/03 Views：63 Category：React
-
Passing events and arguments onClick in React: Pass an inline function to the onClick attribute of the element. The function should get the event object and call handleClick. Pass the event and arguments to handleClick. const App = () = { const handle
How to remove event listeners in React
Publish Date：2025/03/03 Views：194 Category：React
-
To remove an event listener in React: Add an event listener in the useEffect hook. Return a function from the useEffect hook. When the component unmounts, remove the event listener using the removeEventListener method. import {useRef, useEffect} from
Using conditions to jump out of a map in map() in React
Publish Date：2025/03/03 Views：147 Category：React
-
Using conditions in map() in React: Call the map() method on an array. Use an if condition to explicitly return if the condition is met. Otherwise return a different value or return null to render nothing. export default function App () { const arr =
Calling multiple onClick functions in React
Publish Date：2025/03/03 Views：105 Category：React
-
To call multiple onClick functions in React: Set the onClick attribute on the element. Call other functions in the event handler. The event handler can call as many other functions as needed. export default function App () { const s
