scroll to top next js

1//__view.jsx
2const ScrollTopView = (props) => {
3	const { onScroll, onVisbile, visible } = props
4
5	console.log(visible)
6	if (typeof window === 'object') window.addEventListener('scroll', onVisbile)
7
8	return (
9		<>
10			<div
11				style={{
12					position: 'fixed',
13					bottom: 30,
14					right: 30
15				}}>
16				<button
17					className='btn btn-primary btn-small'
18					onClick={onScroll}
19					style={{ display: visible ? 'inline-block' : 'none', borderRadius: 5 }}>
20					ScrollTop
21				</button>
22			</div>
23			<h1 style={{ position: 'fixed', bottom: 25, left: '40%', display: visible ? 'inline-block' : 'none' }}>End Scroll</h1>
24		</>
25	)
26}
27
28export default ScrollTopView
29
30// index.jsx
31import ScrollTopView from './__view'
32import { createElement, useState } from 'react'
33
34const ScrollTop = () => {
35	const [visible, setVisible] = useState(false)
36
37	const onVisbile = () => {
38		const scrolled = document.documentElement.scrollTop
39		if (scrolled >= 600) setVisible(true)
40		else if (scrolled <= 300) setVisible(false)
41	}
42
43	const onScroll = () => {
44		if (typeof window === 'object') window.scrollTo({ top: 0, behavior: 'smooth' })
45	}
46
47	return createElement(ScrollTopView, {
48		onScroll,
49		onVisbile,
50		visible
51	})
52}
53
54export default ScrollTop
55