我用另一个滚动动画替换了单页网站的滚动动画,当您使用顶栏时,该动画会更改 URL(它是在基础中构建的)
虽然现在当我单击顶栏中的某个项目时 URL 会发生变化,但页面上的所有其他链接或可单击元素都会使其滚动回页面顶部。
例如,当我尝试单击 slider 的下一个/上一个按钮时,它会滚动回页面顶部,就像我单击“主页”一样。
有人能看出动画代码有什么问题吗?
$(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,但这似乎只有在你有服务器的情况下才有效,而我没有)
//* 编辑 *// 我刚刚发现并非所有链接都使其滚动到页面顶部,只是我的轨道 slider 的按钮和顶栏折叠时的菜单按钮
//编辑2// 现在,当我滚动到下一页时,URL 会发生变化! 我现在看到的唯一问题是,由于某种原因,轨道 slider 的按钮和折叠顶栏的菜单按钮与我的主页按钮的作用相同(使页面一直滚动回到顶部)。 所以我需要做的最后一件事就是让按钮再次工作。使菜单按钮展开顶栏并使 slider 的下一个和上一个按钮正常工作
最佳答案
如果您只想根据 scrollPosition
更改 hash
,那么您就成功了一半。
您需要将一些逻辑绑定(bind)到 scroll
事件。 Here is a fork of your Fiddle其中 hash
在 scroll
上更改。
当用户滚动页面时,我们会迭代所有 .page
元素,并将它们的 offset().top
与 $( document ).scrollTop() 进行比较
.
我们将新的 hash
设置为具有 lower 的最后一个 .page
元素的 id
offset().top
比 $( document ).scrollTop()
是。
(我也 debounced 该功能,因此它在滚动时不会不断触发 - 您当然可以删除该部分)
但是,您应该考虑到,通过更改哈希
,您将跳转到等效元素。 Here is a guide关于如何抑制这种行为。
编辑:
这是一个updated Fiddle我在其中实现了上面的解决方案,用于抑制 hash
更改上的强制滚动
。
关于javascript - 滚动动画会破坏页面上的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35312253/