程序员经验分享-hwhale

在下一个js中平滑滚动

2023-11-25

如何在 Next.js 中将滚动效果设置为平滑（全局）？ 我尝试在全局 css 上执行此操作，但它停用了 Next js 已有的滚动到顶部功能。

我也尝试了在互联网上找到的这个解决方案，但它也不起作用。

 componentDidMount() {
 Router.events.on('routeChangeComplete', () => {
    window.scroll({
       top: 0,
       left: 0,
       behavior: 'smooth'
    });
 });

}


在 html 或 body 中添加滚动行为：平滑。 然后添加

<Link href="#someid" scroll={false}>

works

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

Nextjs

smoothscrolling

在下一个js中平滑滚动 的相关文章

  • 如何在 render 方法中的 React const 变量内循环

    我有一个映射的 const 变量 我用它来注入渲染方法中的返回值 我现在的问题是 我正在映射的对象本身有一个对象集合 我想循环遍历每一个并添加 jsx 语法 这就是我所拥有的 const tasks this state tasks map

  • 找不到模块：错误：包路径。未从包中导出

    import firebase from firebase const firebaseConfig apiKey AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc authDomain todo app e3

  • 使用 css 模块如何定义全局类

    我正在使用 css 模块 但是我在组件中使用的一个用 JavaScript 附加推文的库向我的组件添加了一些元素 结构如下 div class user div div class tweet div 我现在想在组件的 css 模块中设置这

  • ReactJs 中输出事件的 Angular

    我正在寻找在 ReactJs 中创建类似 Angular 等输出事件的方法 我正在根据 Atomic 设计在 ReactJs 中制作一个组件库 因此 例如 我在其他组件中注入了一个 Button 我想知道如何为 Button 编写一个 pr

  • 如何为谷歌材料条形图制作动画

    我正在反应项目中绘制反应谷歌条形图 材料图表 并且我正在尝试制作动画 我读过这种图表不支持动画 但我需要这样做 必须有任何方法可以做到这一点 我很难认为新的东西比旧的东西更糟糕 有人知道我该怎么做吗 我尝试了很多不同的方法 但没有任何效果

  • 图片是在外部库中加载的，如何用webpack加载它们？

    首先 我需要说的是 我对 Webpack 的基础知识知之甚少 这可能就是我找不到解决方案的原因 所以我知道为了加载图像我需要一个路径而不是仅仅将其作为字符串输入require path to image 然后我得到了一个外部库 我需要在其中

  • 反应/Firebase。如何在项目中保存更新的数据？

    当我尝试更改数据时 更改正在进入我的 Firestore 数据库 没关系 但是当我重新加载页面或注销并尝试再次登录时 用户数据不会出现在我的项目中 但也会出现存储在我的Firestore Database 即使重新加载页面后 如何保存并显示

  • 如何向 React 中的 onChange 函数传递附加参数

    所以 我遇到了这个问题 我这里有这种类型的元素 显然在更改输入时有事件 是否可以像这样传递参数并访问事件 如果是这样 我该怎么办 this function accepts two other params index stringValu

  • 在 React 中将 Tailwind 类作为 prop 传递

    我正在创建一个可重用的组件按钮 我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们 这是我的组件 function Button primary secondry label onClick return

  • 纯组件在没有变化时渲染？

    我有一个像这样的纯组件 interface Props checkBoxTitleStyle any checkBoxBackgroundColor any onPressCheckBox id isChecked selectedArra

  • 添加鼠标事件到svg ，检测网格悬停

    我有一个有点复杂的问题 我正在尝试通过 svg 渲染网格 然后将事件侦听器添加到网格中 目前我正在通过渲染网格

  • 无法解构“undefined”或“null”的属性“user”

    使用 redux 检索用户信息时出错 我想从数据库获取用户信息 姓名 密码和头像地址 然后对其进行编辑 我正在使用nodejs express react redux 和jwt Actions user js import axios fr

  • React this.setState 不是一个函数

    尝试编写使用第 3 方 API 的应用程序时不断收到此错误 类型错误 this setState 不是一个函数 当我尝试处理 API 响应时 我怀疑这个绑定有问题 但我不知道如何修复它 这是我的组件的代码 var AppMain React

  • 在 React 组件中动态导入图像

    我正在尝试在某些 React 组件中动态加载图像 我在用着require而不是简单地传递路径以提高性能 我想我可以使用内联require它确实有效 然而 当我试图通过prop相反 我收到错误 我究竟做错了什么 EDIT 事实证明两者都有效

  • 当直接调用函数时，React 如何/为什么知道函数组件内没有调用钩子？

    出于好奇 我想call直接一个React函数组件 就像常规函数一样 然而 React 抱怨道 Invalid hook call Hooks can only be called inside of the body of a functi

  • 用笑话测试实现react-leaflet映射的react组件的问题

    当我尝试测试实现react leaflet库的react组件时 遇到以下问题 C digital booking ui node modules react leaflet lib index js 1 Object

  • 在 React 应用程序中使用 API 密钥

    我有一个使用两个第三方服务的 React 应用程序 该应用程序已开始使用react create app 这两项服务都需要 API 密钥 通过脚本标签提供一个密钥 如下所示 另一个 API 密钥在请求中使用 我将实际密钥存储在常量中并使用它

  • Java 的 React Typescript API 类型 byte[] image/png

    我正在将其转换为我们的 React Web 应用程序的 Typescript 服务 下面是 Java 中的原始 API Typescript 响应数据类型是什么 斑点 GET Path vendorId Photo Produces ima

  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果

  • 将 async 和await 与export const 一起使用

    我无法完成这项工作 它说 await 是一个保留字 是的 当然是 而且我想使用它 怎么了 export const loginWithToken async gt return dispatch gt dispatch type SESSI

随机推荐

  • 如何在VBA中使用列/行索引作为范围

    喜欢使用Cells 1 1 代替Range A1 在 VBA 中使用列 行索引作为范围的最佳方法是什么 我想出了两种解决方案来表示 Range A A Range Cells 1 1 Cells Columns 1 Rows count 1

  • 如何解释 ELF 可执行文件中的动态符号表？

    我正在考虑解释动态符号表 dynsym 的 ELF 可执行文件 我可以成功解释符号表 symtab 每个符号 16 个字节 使用value属性来表示符号的地址和name属性表示字符串开头的偏移量 strtab部分 但我无法解释动态符号表 d

  • C#：如何从资源文件加载光标？

    我已将文件 x ani 导入到资源文件Resources resx 中 现在尝试使用 ResourceManager GetObject aero busy ani 加载该文件 Cursor Current Cursor Resources

  • ASP.Net MVC 中的线程安全

    我怀疑这也适用于一般的 ASP Net 但我不确定 如果我在控制器上有一个操作方法 比如 MyController DoSomethingExciting 并且三个客户端 同时 点击它 那么它本质上是线程安全的 还是我需要做一些事情来确保三

  • Objective C：我的自定义 -init 方法没有被调用

    我有一个从 UIView 派生的类 我想为其创建一个 init 类 如下所示 id init if self super init my initializations here return self 不幸的是 我知道 init 没有被调

  • 如何在 Apache 2.x 中使用 mod_deflate 预压缩文件？

    我通过 apache 提供所有内容Content Encoding zip但这是动态压缩的 我的大部分内容都是磁盘上的静态文件 我想预先对文件进行 gzip 压缩 而不是每次请求时都对其进行压缩 我相信 这是一件事 mod gzip在 Ap

  • 高效的Python IPC [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我正在Python3中制作一个应用程序 它将分为batch and gui部分 Batch负责处理逻辑和gui负责显示它 Which 进程间通信 I

  • 如何将微调器添加到 ActionBar？

    我试图让我的微调器作为操作栏下拉列表项工作 但我似乎根本无法实现它 在谷歌搜索后没有太多关于此的教程 我认为它与 setListNavigationCallbacks 有关行代码 我只是不知道如何从该行开始工作 setup action b

  • 倒计时器 - iPhone [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 我想显示倒计时器 我有开始日期和结束日期 我需要显示剩

  • python中大数的阶乘

    这是我的阶乘方法 def factorial n Returns factorial of n r 1 for i in range 1 n 1 r i return r 我认为这非常简单 但我猜你可以做得更有效 因为像 100000 这样

  • 为什么当Windows服务停止时调用base.OnStop()？

    我正在创建一个 C Net Windows 服务 想知道您是否总是需要调用base OnStop 在服务的OnStop 方法以及为什么 protected override void OnStop threadRunning false t

  • 为什么要将 stdin、stdout 和 stderr 设置为单个 fd？

    我从 APUE 看到了这个代码片段 dup2 fd 0 dup2 fd 1 dup2 fd 2 if fd gt 2 close fd 在我的理解中 它使 stdin stdout 和 stderr 都指向 fd 它说很多程序都包含此代码

  • Rails Accepts_nested_attributes 计数验证

    我有三个型号 销售 商品和图像 我想验证创建销售时 每个销售至少有三张照片和一件或多件商品 实现这一目标的最佳方法是什么 销售模式 class Sale lt ActiveRecord Base has many items depende

  • 如果我点击此处地图中的不同标记，如何删除以前的信息气泡？

    下面是我添加信息气泡的代码 我想在单击 点击 不同的标记后删除当前的信息气泡 function addInfoBubble map var group new H map Group map addObject group add tap

  • Sprite Kit - 将两个物理体添加到一个 SKNode

    是否可以将两个 或更多 SKPhysicsBody 添加到一个 SKNode 中 与此类似的东西 物理编辑器的示例因为角色的头部应该与球碰撞 所以顶部应该是圆形的 此外 球不得穿过球员 您知道如何实现这一目标吗 As the physics

  • 重复的键值违反了 django 中的唯一约束

    我有在 django 中创建新用户的功能 如下所示 def initialize username password email title firstName lastName telephoneNumber mobileNumber s

  • ASP.NET MVC 3 模型绑定和表单字段

    我有一个名为Domain Models BlogPost其中包含以下属性 PostID Title Author 发表日期 Body 我还有一个名为Domain Models PostComment其中包含以下属性 评论ID PostID

  • Android 应用内多次购买

    有没有办法使用应用内购买购买超过 1 件商品 例如 我可以购买 2 件相同的商品吗 创建多个产品不是正确的答案 因为如果你计划出售游戏内的金钱或 健康药水 这些东西可以无限次购买 请参阅有关的答案托管 非托管产品来纠正处理这种情况

  • order_by() 不适用于 Django 视图中的 filter()

    我的型号 class Bild models Model album models ForeignKey Album slot models IntegerField bild models ImageField upload to bil

  • 在下一个js中平滑滚动

    如何在 Next js 中将滚动效果设置为平滑 全局 我尝试在全局 css 上执行此操作 但它停用了 Next js 已有的滚动到顶部功能 我也尝试了在互联网上找到的这个解决方案 但它也不起作用 componentDidMount Rout

热门标签