javascript 更改页面时滚动到顶部

v09wglhw 于 2023-02-21 发布在 Java

关注(0)|答案(3)|浏览(149)

我有一个分页组件（React）。我需要滚动到顶部时，改变页面。有人能帮助我吗？

const MAX_BTN = 9;
const MAX_BTN_LEFT = (MAX_BTN - 1) / 2;

const Pagination = ({items, limit = 20, page, setPage}) => {
  const pages = items !== null && Math.ceil(items.total_results / limit);
  const startBtn = Math.max(page - MAX_BTN_LEFT, 1);

  return (
    <ul className="pagination">
      {Array(Math.min(MAX_BTN, pages)).fill()
        .map((_, i) => i + startBtn)
        .map(value => (
          <li key={value}>
            <button onClick={() => setPage(value)}>{value}</button>
          </li>
        ))
      }
    </ul>
  )
}

export default Pagination;

JavaScript

来源：https://stackoverflow.com/questions/75502601/scroll-to-top-when-changing-pages

3条答案

按热度按时间

cl25kdpy1#

您可以使用函数返回顶部：

const handlePageChange = value => {
    window.scrollTo(0, 0);
    setPage(value);
  }

在你的纽扣上说：

...
  <li key={value}>
    <button onClick={() => handlePageChange(value)}>{value}</button>
  </li>

赞(0）回复(0）举报 2023-02-21

ljsrvy3e2#

单击链接时，使用以下方法scrollTo调用浏览器window对象

window.scrollTo(0, 0);

赞(0）回复(0）举报 2023-02-21

sqougxex3#

一个优雅的处理方法是为应用的最顶部创建一个ref，然后将ref传递给一个钩子，当路径名改变时，钩子会处理滚动到页面顶部的操作。
下面是我使用的一个简单的钩子（类型定义可以清除）：

使用滚动到顶部.ts

import { useEffect } from 'react';
import { useLocation } from 'react-router';

const useScrollToTop = (ref: any) => {
  const location = useLocation();

  // ensure pages scroll to top
  useEffect(() => {
    if (ref?.current) {
      ref.current.scrollIntoView();
    }
  }, [ref?.current, location.pathname]);

  return null;
};

export default useScrollToTop;

现在，在应用的第一个元素的顶部添加引用。

App.js：（或任何组件）

import useScrollToTop from './useScrollToTop';
然后创建一个新的空引用：
const ref = useRef<HTMLDivElement | null>(null);
将ref传入钩子：
useScrollToTop(ref)
在应用的最顶部定义引用（内部组件示例）：

return (
  <div ref={ref}>
    <Header />
    <Navigation />
    <Content />
    <Footer ?>
  </div>
);

现在，只要路径发生变化，最终用户就会滚动到页面顶部。

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 更改页面时滚动到顶部

3条答案

相关问题

热门标签

最新问答