如何滚动到特定元素或跳到 ReactJS 中的内容？

以下示例介绍了如何使用useRef()钩子在 React JS 中滚动到网页的元素。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useRef React 钩子的基本知识。

基本设置：您将使用 create-react-app 启动一个新项目，因此打开您的终端并输入。

npx create-react-app react-scroll

现在通过在终端中输入给定的命令转到您的react-scroll文件夹。

cd react-scroll

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install --save styled-components

现在在src中创建components文件夹，然后转到 components 文件夹并创建两个文件ScrollPage.js和Styles.js 。

项目结构：项目中的文件结构将如下所示。

scrollTo 方法：用于滚动到浏览器中的指定元素。在这里，我们使用top或left或right或bottom作为第一个参数来按所需方向滚动页面。

第二个参数是（滚动的）行为。它告诉我们窗口将如何到达指定的元素，并具有 auto 的默认值。然而，提供这个参数并不是强制性的，因为浏览器使用它的默认值，以防它没有提供。

行为类型：

1. 自动行为：它允许直接跳转“滚动效果”并将我们带到元素。这是上面讨论的行为参数的默认值。

   句法：

   window.scrollTo({
        top: 100px
        // Browser uses the default value in 
        // case it is not provided.
   });

   window.scrollTo({
        top: 100px,
        behavior: "auto"
   });

2. 流畅的行为：它允许通过页面平滑的“滚动效果”并将我们带到元素。

   句法：

   window.scrollTo({
           top: 100px,
           behavior: "smooth"
       });

示例：向下滚动到 Services 元素，这就是useRef()钩子发挥作用的地方。我们创建了一个初始化为 null 的 useRef 对象ServicesRef 。该对象有一个名为.current的属性。该值始终在refObject.current属性中继续存在。

当我们单击按钮时， gotoServices函数通过onClick 事件触发，它将 scrollTo函数的顶部参数设置为我们的 Services 元素顶部位置的值（以像素为单位）。通过编写Services.current.offsetTop可以通过 offsetTop 属性访问 Services 元素的顶部位置，该属性返回相对于 offsetParent 元素顶部的顶部位置（以像素为单位）。

例如，如果我们的 Services 元素距离父元素 100px，即本例中的 div 元素，那么它会将 100px 分配给 scrollTo函数的顶部参数，这会将我们带到页面下方 100px。这就是我们在这里将refObject.current.offsetTop的值分配给 top 参数的原因。

ScrollPage.js

import React, { useRef } from "react";
import { Heading, Button, Para, Margin } from "./Styles";
const ScrollPage = () => {
  const ServicesRef = useRef(null);
  
  const gotoServices = () =>
    window.scrollTo({
      top: ServicesRef.current.offsetTop,
      behavior: "smooth",
      // You can also assign value "auto"
      // to the behavior parameter.
    });
  
  return (
    

      GeeksForGeeks
      Scroll to Services
  
      
        GeeksForGeeks Services
  
        
          Lorem Ipsum è un testo segnaposto utilizzato nel settore della
          tipografia e della stampa. Lorem Ipsum è considerato il testo
          segnaposto standard sin dal sedicesimo secolo, quando un anonimo
          tipografo prese una cassetta di caratteri e li assemblò per preparare
          un testo campione. È sopravvissuto non solo a più di cinque secoli, ma
          anche al passaggio alla videoimpaginazione, pervenendoci
          sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la
          diffusione dei fogli di caratteri trasferibili “Letraset”, che
          contenevano passaggi del Lorem Ipsum, e più recentemente da software
          di impaginazione come Aldus PageMaker, che includeva versioni del
          Lorem Ipsum.
        
  
        
          Lorem Ipsum è un testo segnaposto utilizzato nel settore della
          tipografia e della stampa. Lorem Ipsum è considerato il testo
          segnaposto standard sin dal sedicesimo secolo, quando un anonimo
          tipografo prese una cassetta di caratteri e li assemblò per preparare
          un testo campione. È sopravvissuto non solo a più di cinque secoli, ma
          anche al passaggio alla videoimpaginazione, pervenendoci
          sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la
          diffusione dei fogli di caratteri trasferibili “Letraset”, che
          contenevano passaggi del Lorem Ipsum, e più recentemente da software
          di impaginazione come Aldus PageMaker, che includeva versioni del
          Lorem Ipsum.
        
      
    
  );
};
  
export default ScrollPage;

样式.js

import styled from 'styled-components';
  
export const Heading = styled.h1`
   margin: 0;
   padding: 0;
   text-align: center;
   color: green;
`;
  
export const Button = styled.button`
  padding: 20px;
  font-size: 20px;
  position: relative;
  left: 42%;
  margin: 20px;
`;
  
export const Para = styled.p`
  padding-left: 40px;
  padding-right: 40px;
`;
  
export const Margin = styled.div`
  margin-top: 610px;
  margin-bottom: 500px;
  background-color: black;
  color: white;
  padding: 20px;
`;

应用程序.js

import { Fragment } from "react";
import ScrollPage from "./components/ScrollPage";
function App() {
  return (
     
      
     
    );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

• 使用默认行为（自动）：查看它如何直接跳转到元素。
  
• 使用流畅的行为：看看它是如何顺利通过页面的。