如何设置换页后滚动到​​页面顶部？

Question

我有一个问题，我不知道。当用户更改页面时，用户停留在页面底部。我想将用户带到页面顶部。我过去常常通过 Id 导航，但它不起作用。我该如何解决？

const handleSelect = (e) => {
        navigate('#manageItem')
        setLimit(e.target.value)

    }


    return (
        <div id='manageItem' div className='container mx-auto' >
            <PageTitle title={'Manage items-Laptop Stockroom'} />
            {isLoading ? <Spinner /> : <div className='grid grid-cols-1 gap-16 mt-16 md:grid-cols-3 p-4'>
                {
                    products.map(laptop => <SingleProduct
                        key={laptop._id}
                        laptop={laptop}
                    />
                    )
                }
            </div>}

            <div className='flex justify-center gap-2 my-12 items-center'>
                <div className='flex gap-2'>
                    {
                        [...Array(page).keys()].map(number => <>
                            <button
                                onClick={() => setActive(number)}
                                key={number}
                                className={`border-2 p-1 border-blue-500 font-semibold ${active === number ? 'bg-blue-500' : ''}`}
                            > {number + 1}</button>
                        </>)
                    }
                </div>
                <div>
                    <select onChange={handleSelect}>
                        <option value="6">6</option>
                        <option value="12">12</option>
                        <option value="18">18</option>
                    </select>
                </div>
            </div>
        </div >
    );
};

export default ManageItems;

Answer 1

你可以像这样简单地做一些事情

const scrollToTop = () => {
  window.scrollTo(0, 0);
}