scroll to top react

1componentDidMount() {
2  window.scrollTo(0, 0)
3}

1onUpdate={window.scrollTo(0, 0)}
2
3componentDidMount() {
4  window.scrollTo(0, 0)
5}

1useEffect(() => {
2  window.scrollTo(0, 0)
3}, [])

1const scrollTop = () =>{   window.scrollTo({top: 0, behavior: 'smooth'});};

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

1componentDidMount() {
2  window.scrollTo(0, 0)
3}
4