如何解决preventDefault() 不适用于单击事件处理程序上的 window.location.hash
我正在尝试在单页应用程序中平滑滚动。为了做到这一点,我在点击事件处理程序中使用 window.location.hash 语句,如:
$('a').on('click',function(event) {
event.preventDefault();
let hash = this.hash;
if (hash !== '') {
window.location.hash = hash
// _scrollTo();
}
})
我将窗口的 hashchange 事件绑定到上面的 _scrollTo() 函数,这样当用户尝试使用哈希获取 url 时,应用程序应该滚动到那里:
$(window)
.on("hashchange",_scrollTo)
.trigger("hashchange")
滚动功能是这样的:
const _scrollTo = function () {
var destination = $('body').find(window.location.hash);
_scrollToDestination(destination,configMap.duration);
}
我需要使用此功能,因为页面顶部有固定的标题,我不希望滚动到标题下的部分而用户看不到
const _scrollToDestination = function (destination,duration) {
let headerHeight = $('header').outerHeight(true);
$('html,body').animate({
scrollTop: destination.offset().top - headerHeight
},duration);
}
问题是当我在点击处理程序中使用 window.location.hash 语句时,事件处理程序的行为就像没有阻止默认行为一样,我得到了奇怪的结果。
感谢任何帮助。谢谢。
解决方法
只是阻止 window.location 的默认行为...对我有用
How can I update window.location.hash without jumping the document?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。