平滑滚动是一种减少滚动时显示突然跳跃的技术。滚动时，内容将显示为无缝地流入和流出屏幕。许多浏览器附带它，但它也可以由网站实现。
Lenis smoothscroll：在 Firefox 上元素的下拉动画后不会滚动到底部
编辑：它似乎适用于 Chrome 和 Edge。在最新的 Windows Safari 版本 (5.1.7) 上，它无法工作，因为它不支持“=>”，并且 Safari 不支持 Windows 10 更新...
我的目的是实现平滑的滚动行为，但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时，页面将向下滚动到具有相应 ID 的部分。为了做到这一点...
我最近安装了来自 cferdinandi 的平滑滚动库，平滑滚动功能就像一个魅力。 使用 CMS 添加到我的文本中的锚点如下所示： 我最近安装了 cferdinandi 的平滑滚动库，平滑滚动功能就像一个魅力。 使用 CMS 添加到我的文本中的锚点如下所示： <span id="authentication" class="ancre"></span> 关于我在文本中谈论的内容，ID 每次都不同。而且效果很好。 我的问题是，平滑滚动库似乎在运行时删除了该类，因此我的 class='ancre' 在调用锚点时不会显示。班级是： .ancre:target{ background-color: #131b24; color: white; } 所以我删除了类的“target”参数，并在 JS 文件中添加了一个函数，以便在平滑滚动运行后添加该类。看起来像这样： css/app.css 中的 CSS .ancre{ background-color: #131b24; color: white; } js/app.js 中的 JS after: function () { var className = 'ancre'; document.querySelector('.' + className).classList.remove(className); document.getElementById(anchor.id).classList.add(className); } 但是它不起作用，我就是不明白为什么。 您可以通过按此页面上的“两步身份验证”和/或“移动”按钮来尝试。 您可以使用scrollIntoView javascript 函数，无需库。 https://codepen.io/gezzasa/pen/gzXPbJ/ 首先我必须将容器设置为position: relative;，然后将锚点设置为position: absolute; top: 0;。将 JS 上的选项设置为 block : 'center' 现在，它只会滚动直到锚点位于屏幕中间。 var smoothScroll = function(e, me) 是我声明的函数，并在 a 标签的 onclick 上触发。有不同的方法来运行该函数，但这很简单。我在事件的 onclick 上传入了 event（单击时触发的事件）和 this 来告诉脚本我点击了什么。 e.preventDefault() 将阻止 a 标签触发其默认函数，该函数将使用提供的 href 重新加载页面。在这种情况下，它将附加一个没有该脚本的 ID。 document.querySelector(me.getAttribute('href')) 将获取需要滚动到的 ID，然后 scrollIntoView 函数将根据您提供的选项进行滚动。 希望我解释得很好...我没有太多解释 JS 的经验。；
JavaScript/JQuery - 单击时平滑滚动到 ID
我的目的是实现平滑的滚动行为，但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时，页面将向下滚动到具有相应 ID 的部分。为了做到这一点...
我正在尝试让我的代码使我的 div 水平平滑滚动。目前它只是跳转到位置。谁能告诉我我做错了什么？我已经提供了我的代码和 JSFiddle...
我正在尝试在 React 中创建一个平滑的滚动页面。该页面分为 4 个部分： 概述 关于我们 培训班 消息 因此，在滚动时，如果它位于 id=news 的“新闻”部分，则 URL 笑...
目前我在 DOM 中使用 CDK 虚拟滚动，但是当快速滚动时 DOM 会出现故障，所以我打算实现 Pull 刷新方法，那么如何实现这个...
如何在 React 中使用 tailwindcss 的平滑滚动？
我使用 tailwindcss 和 React 创建了一个单页网站。在原型中，我使用 tailwindcss 类“scroll-smooth”并且它有效。在 React 中，“scroll-smooth”类确实......
我使用 Locomotive、ScrollTrigger 和 Gsap 来制作动画。平滑滚动会导致额外的页面意外地在末尾滚动。当我检查网页时显示“has-scroll-init+has-s...
你知道为什么scroll-behavior: smooth不能与平滑滚动的Lenis库一起使用吗？当我评论下面的 Lenis 代码时，它工作得很好。当我添加 Lenis 代码时，它滚动不顺畅...
带有scroll-margin-top的Javascript平滑滚动会在末尾创建一个跳转
我正在使用 JavaScript 在网站上实现平滑滚动，并且遇到了 CSS 滚动边距顶部导致末尾跳转的问题。我使用以下 CSS 作为滚动边距：...
当页面长度发生变化时，有没有办法平滑地向上或向下滚动而不是跳跃？
我正在尝试创建一个有两个选项卡的组件，一个是显示数据的表格，另一个让用户查看有关表中特定条目的更深入的信息。这个问题...
我有一个带有网格项的网站，当页面滚动时（即向下滚动并查看更多图像），该网格项会显示隐藏的子项。 我正在尝试抓取与每个图像相关的文本（视频视图）并且......
当 Chrome 中 html 标签上的滚动行为设置为“平滑”时，不会显示 HTML5 表单验证消息
当使用 HTML5 验证的页面上有表单字段时，我在 html 标记上设置滚动行为：平滑属性时遇到冲突。使用 Chrome 时您会看到这个问题（fin...
我正在构建一个简单的食谱网站，我有 3 个导航链接： 家 食谱 关于我们。 我的 id 属性与 href 属性中的值匹配，但导航链接仍然不活动或向下滚动到
所以我有这段代码，在使用鼠标滚轮或触摸板时将视图更改为部分数组中的下一个 div。但是，当我使用触摸板时，它无法正常工作，因为每次......
在 Windows 10 上使用 Logitech 鼠标接收高精度 WM_MOUSEWHEEL 事件
为了改进应用程序中的滚动，我最近添加了对高分辨率滚轮事件的支持。根据文档，这非常简单：WM_MOUSEW 的处理程序...
如何在没有react-scroll包的情况下在react中添加平滑的srcolling和滚动功能
我想在我的 React 网站中添加平滑滚动功能。我有一个标题组件，它包含导航栏，其中包含三个涉及主页、服务、关于的链接。服务和关于是
如何在 Next.js 中将滚动效果设置为平滑（全局）？ 我尝试在全局 css 上执行此操作，但它停用了 Next js 已有的滚动到顶部功能。 我尝试了我发现的这个解决方案...
如何使用 Tailwind CSS 和 React-Scroll 在 React 中突出显示活动导航栏
我想更改活动导航栏链接的文本颜色。我如何使用 React、Tailwind CSS 和 React-Scroll 来做到这一点？ 我想更改活动导航栏链接的文本颜色。我如何使用 React、Tailwind CSS 和 React-Scroll 来做到这一点？ <ul className="text-lg font-bold"> <li className="transition duration-300 ease-in-out hover:text-blue-500"> <Link to="home" smooth={true} duration={300}> Home </Link> </li> <li className="transition duration-300 ease-in-out hover:text-blue-500"> <Link to="about" smooth={true} duration={300}> About </Link> </li> <li className="transition duration-300 ease-in-out hover:text-blue-500"> <Link to="projects" smooth={true} duration={300}> Projects </Link> </li> <li className="transition duration-300 ease-in-out hover:text-blue-500"> <Link to="contact" smooth={true} duration={300}> Contact </Link> </li> </ul> 要为 <Link> 中的活动 react-scroll 组件设置样式，您可以使用 activeClass 属性，如下所示： <li className="transition duration-300 ease-in-out hover:text-blue-500"> <Link activeClass='text-white' to="contact" smooth={true} duration={300}> Contact </Link> </li> 这会将 text-white 添加到您的活动链接组件。