我正在尝试实现一个小代码,当我单击锚点时,我可以使用它获得平滑滚动(并且动画后会出现锚点名称),如果我按下浏览器的后退按钮并更新 URL(没有 #anchor 名称),我想返回页面顶部。
这是代码:
$(function() {
// Smooth scrolling when clicking on anchor
$('a[href*=#]:not([href=#])').click(function(event) {
event.preventDefault();
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
var hash = this.hash;
$('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
location.hash = hash;
href = window.location.href;
history.pushState({page:href}, null, href);
});
return false;
}
}
});
// Get smooth scrolling to the top whith back button of browser
$(window).bind('popstate', function(event) {
var state = event.originalEvent.state;
var target = window.location.href.split('#');
var href = target[0];
if (state) {
$('html,body').animate({ scrollTop: 0 }, 300, function() {
window.location.href = href;
})
}
});
// First page loading
window.onload = function() {
history.replaceState({ path: window.location.href }, '');
}
});
上述所有功能在Safari和Chrome下都能很好地运行。但 Firefox 的情况并非如此:一旦执行平滑向下滚动,我需要在返回按钮上单击两次以重定向到页面顶部。
我已经在stackoverflow上看到了另一个问题,并尝试使用和不使用event.preventDefault,也只输入:
$('html').animate
或$('body').animate
但行为是一样的。
如果有人能看到为什么它不起作用。
谢谢
您正在触发此行中的其他历史记录更改location.hash = hash;
所以,我对你的代码做了一些更改,它现在可以在我的FF中工作。
在点击处理程序中,
$('html').animate({ scrollTop: target.offset().top - 55}, 300, function() {
href = window.location.href;
history.pushState({page:href}, null, href.split('#')[0]+hash);
});
此外,似乎$('html,body').animate
运行两次回调,因此弄乱了历史。这就是为什么我只留下html。
在popstate处理程序中,我删除了页面重新加载,但是如果您愿意,可以保留它:
if (state) {
$('html,body').animate({ scrollTop: 0 }, 300)