滚动动画会破坏页面上的链接

Posted 2023-02-25

【中文标题】滚动动画会破坏页面上的链接

【英文标题】：Scrolling animation breaks links on page

【发布时间】：2016-02-10 10:12:05

【问题描述】：

我用另一个滚动动画替换了我的一个页面网站的滚动动画，当您使用顶栏时它会更改 URL（它是内置的）

虽然现在当我单击顶部栏中的某个项目时 URL 会发生变化，但我页面上的所有其他链接或可点击元素都会使其滚动回页面顶部。

例如，当我尝试单击滑块的下一个/上一个按钮时，它会像单击主页一样滚动回页面顶部。

有人能看出动画代码有什么问题吗？

$(document).ready(function () 
    $('a[href^="#"]').click(function () 
        var target = $(this.hash),
            hash = this.hash;

        if (target.length == 0) 
            target = $('a[name="' + this.hash.substr(1) + '"]');
        
        if (target.length == 0) 
            target = $('html');
        

        $('html, body').animate(
            scrollTop: target.offset().top
        , 500, function () 
            location.hash = hash;
        );

        return false;
    );
);

PS：当我手动滚动到下一页时，URL 不会改变。如果有人对此有解决办法，我很乐意为您服务！ （我尝试使用history.js，但这似乎只有在你有服务器的情况下才有效，而我没有）

//* 编辑 *// 我刚刚发现并不是所有的链接都让它滚动到页面顶部，只有我的轨道滑块的按钮和顶部栏折叠时的菜单按钮

//编辑 2// 当我滚动到下一页时，URL 现在会更改！ 我现在看到的唯一问题是我的轨道滑块的按钮和折叠的顶栏的菜单按钮与我的主页按钮相同（使页面一直滚动到顶部）出于某种原因。 所以我需要做的最后一件事是让按钮再次工作。使菜单按钮展开顶栏并使我的滑块的下一个和上一个按钮正常工作

【问题讨论】：

你能提供一支笔或小提琴吗？

我可以创建一个简化版本作为小提琴，但我认为它没有多大用处，因为我的网站是用基础创建的，滑块在小提琴中不起作用，但我会做一个！

jsfiddle.net/0shto9df

谢谢你 :) 你能列出什么不能正常工作吗？您是否只想根据滚动位置更改哈希？

是的，我希望哈希始终显示网站上的位置。当我最小化屏幕时，我的轨道滑块的下一个和上一个按钮以及汉堡包/菜单按钮不起作用，因此顶部栏崩溃了。如果有我可以使用的代码，以便哈希显示用户在哪个页面上，我可以摆脱弄乱按钮的代码。

【参考方案1】：

如果您只想根据scrollPosition 更改hash，那么您已经成功了一半。

您需要将一些逻辑绑定到scroll 事件。 Here is a fork of your Fiddle 其中hash 在scroll 上被更改。

当用户滚动页面时，我们遍历所有 .page 元素并将它们的 offset().top 与 $( document ).scrollTop() 进行比较。

我们将新的hash 设置为最后一个.page 元素的id，该元素的offset().top 低于$( document ).scrollTop()。

（我也debounced这个函数，所以它不会在滚动时不断触发 - 你当然可以删除那部分）

但是，您应该考虑通过更改 hash，您将跳转到 equivalent 元素。 Here is a guide 关于如何抑制这种行为。

编辑：

这是一个updated Fiddle，我在其中实施了上面的解决方案，用于在hash 更改时抑制强制scroll。

【讨论】：

感谢您的帮助！当我滚动页面时，哈希现在确实发生了变化，但确实跳到了 div 的顶部。此外，它仍然会导致按钮损坏。我看了你告诉我的指南，但答案太多了，我不知道哪个会起作用（我仍然对 Java 很烂）你能再帮忙吗？

当然。首先它不是 Java 而是 javascript ;)(***.com/questions/245062/…) - 我更新了小提琴，现在应该修复跳跃。您能否更新您的问题并列出您期望的行为与您看到的行为？ （另外：是否有任何相关的控制台输出？）

非常感谢先生！我会在一分钟内更新它！