How to use useEffect and window.scrollBy In HTML
In this approach, we are using useEffect to set up an event listener on the button, which triggers window.scrollBy to smoothly scroll to the target element when clicked. The useRef hooks are used to reference both the button and the target element.
Example: The below example demonstrates the scolling to an HTML element using useEffect and window.scrollBy.
// page.js this is the entry point of application
"use client";
import { useEffect, useRef } from 'react';
const App = () => {
const targetRef = useRef(null);
const buttonRef = useRef(null);
useEffect(() => {
const handleScroll = () => {
if (buttonRef.current) {
buttonRef.current.addEventListener('click', () => {
window.scrollBy({
top: targetRef.current.getBoundingClientRect().top - window.pageYOffset,
left: 0,
behavior: 'smooth',
});
});
}
};
handleScroll();
return () => {
if (buttonRef.current) {
buttonRef.current.removeEventListener('click', handleScroll);
}
};
}, []);
return (
<div style={{ padding: '20px' }}>
<h1 style={{ color: 'green' }}>w3wiki</h1>
<h3>Approach 2: Using useEffect and window.scrollBy</h3>
<button ref={buttonRef}
style={{ marginBottom: '20px', padding: '10px' }}>
Scroll to w3wiki Courses
</button>
<div style={{ height: '1000px' }}>
Scroll Down to see the
w3wiki Courses section
</div>
<div ref={targetRef}
style={{ height: '200px',
background: 'lightblue' }}>
<h2>w3wiki Courses</h2>
<ul>
<li>Data Structures and Algorithms</li>
<li>Full Stack Development</li>
<li>Machine Learning</li>
<li>Web Development</li>
<li>System Design</li>
</ul>
</div>
</div>
);
};
export default App;
Start your application using the following command.
npm run dev
Output:
How To Scroll To An HTML Element In NextJS?
NextJS has various features that enable smooth scrolling to HTML elements. One method involves using useRef to create a reference to the target element and scrollIntoView to achieve smooth scrolling. Another method, using useEffect and window.scrollBy, sets up an event listener on a button for smooth scrolling when clicked, with useRef hooks to reference elements.