在 react.js 中滚动到页面顶部-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > react >

vue react javascript angular css html

在 react.js 中滚动到页面顶部

作者：迹忆客最近更新：2023/03/13 浏览次数：

在 react 中使用 window.scrollto() 方法滚动到页面顶部，例如 window.scrollto(0, 0)。

window 对象上的 scrollto 方法滚动到文档中的一组特定坐标。

import {useeffect} from 'react';
export default function app() {
  useeffect(() => {
    // 👇️ scroll to top on page load
    window.scrollto({top: 0, left: 0, behavior: 'smooth'});
  }, []);
  return (
    <div>
      <h2>top of the pageh2>
      <div style={{height: '155rem'}} />
      {/* 👇️ scroll to top on button click */}
      <button
        onclick={() => {
          window.scrollto({top: 0, left: 0, behavior: 'smooth'});
        }}
        style={{
          position: 'fixed',
          padding: '1rem 2rem',
          fontsize: '20px',
          bottom: '40px',
          right: '40px',
          backgroundcolor: '#0c9',
          color: '#fff',
          textalign: 'center',
        }}
      >
        scroll to top
      button>
    div>
  );
}

react.js 中滚动到页面顶部

代码示例中的示例展示了如何：

渲染组件后滚动到页面顶部。
单击按钮滚动到页面顶部。

window.scrollto 方法滚动到文档中的一组特定坐标。

它所采用的对象的 top 属性指定沿 y 轴滚动窗口的像素数。

left 属性指定窗口在 x 轴上滚动的像素数。

behavior 属性指定滚动是否应该平滑地动画化（smooth），或者立即发生（auto）。

behavior 属性的默认值为 auto。

如果我们需要在组件呈现后滚动到页面顶部，则可以使用 useeffect 钩子。

useeffect(() => {
  // 👇️ scroll to top on page load
  window.scrollto({top: 0, left: 0, behavior: 'smooth'});
}, []);

我们将一个空的 dependencies 数组传递给挂钩，因此它只会在初始渲染时运行。

如果我们需要在单击按钮时滚动到页面顶部，请在元素上设置 onclick 属性，并向其传递一个函数。

该函数应该调用 window.scrollto() 方法，就像我们在 useeffect 钩子中所做的那样。

上一篇：在 react 应用程序中应用全局 css 样式

下一篇：在 react 中悬停时显示元素或文本

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

如何在 vue.js 中滚动到页面顶部或底部

发布时间：2023/04/03 浏览次数：508 分类：vue

vue.js 是一种流行的前端框架，它可以帮助开发者构建高效、可维护的应用程序。在vue.js中，滚动页面到顶部或底部是一个常见的需求。在本文中，我们将介绍如何在vue.js中实现这一功能

node.js 与 react js 的比较

发布时间：2023/03/27 浏览次数：173 分类：node.js

本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。这些库用于构建用户界面和服务器端应用程序。

在 typescript 中 react usestate 钩子类型

发布时间：2023/03/19 浏览次数：246 分类：

本教程演示了如何在 typescript 中使用 react usestate hook。

typescript 中的 react 事件类型

发布时间：2023/03/19 浏览次数：477 分类：

本教程演示了如何在 typescript 中为 react 事件添加类型支持。

在 react 中循环遍历对象数组

发布时间：2023/03/18 浏览次数：602 分类：react

在 react 中循环对象数组：使用 map() 方法迭代数组。我们传递给 map() 的函数会为数组中的每个元素调用。该方法返回一个新数组，其中包含传入函数的结果。 export default function app (

获取 react 中元素的类名

发布时间：2023/03/18 浏览次数：340 分类：react

在 react 中使用 event.target 获取元素的类名获取元素的类名：将元素上的 onclick 属性设置为事件处理函数。访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons

如何将 key 属性添加到 react 片段

发布时间：2023/03/18 浏览次数：206 分类：react

使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react

如何在 react 中删除事件监听器

发布时间：2023/03/15 浏览次数：592 分类：react

在 react 中删除事件监听器：在 useeffect 挂钩中添加事件侦听器。从 useeffect 挂钩返回一个函数。当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r

发布时间：2023/03/15 浏览次数：261 分类：react

react 中在 map() 中使用条件：在数组上调用 map() 方法。使用 if 条件，如果条件满足则显式返回。否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =

在 react.js 中滚动到页面顶部-ag捕鱼王app官网