jquery - 使用 fadeIN 函数限制链接标签以获得平滑滚动效果

标签 jquery fadein smooth-scrolling

我有一个单页网站,当单击a标签(导航)时,具有平滑滚动效果,其中一个导航条目还调用带有fadeIN函数的隐藏div(input.box),我的问题是每当带有 fadeIN 功能的条目显示时,页面也会向下滑动一点。我应该如何限制带有淡入淡出功能的菜单滚动?我的 jsfiddle 波纹管上有用于 smoothscroll 和 fadein 的代码。

Smooth Scroll Code

FadeIN Effect Code

最佳答案

平滑滚动代码的以下部分选择要应用效果的元素:

$('a[href*=#]')

您需要限制它以排除打开弹出窗口的 anchor 。执行此操作的方法取决于您如何识别要排除的元素:

$('a[href*="#"]:not(a[href="#info"])')

$('a[href*="#"]:not(.info-popup)')

有人还可能会说,如果标准相反会更简洁,因此需要主动选择应该以平滑滚动为目标的元素,而不是过滤掉:

$('a.page-nav')

关于jquery - 使用 fadeIN 函数限制链接标签以获得平滑滚动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10579164/

相关文章:

javascript - 从外部 js 加载的固定页脚确实 "overlap"站点内容

javascript - jQuery 在我自制的灯箱上淡入淡出

javascript - 平滑滚动会奇怪地跳跃

javascript - 平滑滚动以锚定在不同页面上

javascript - 使用jquery无法读取Json数据

javascript - 在悬停的外部 div 上删除内部元素的类

php - 使用 AJAX 将数据回显到下拉列表中

jquery - 更高效的 jQuery 悬停到淡入/淡出多个 div?

javascript - 更改按钮的文本以及 jquery 中的 fadetoggle 函数

在 PageView 中的 WheelEvent 上 Flutter Web "smooth scrolling"