Javascript 来自外部页面的锚定链接不';使用jQuery平滑滚动代码时不起作用
我不是JS开发人员,我正在使用Bootstrap构建一个带有锚链接的单页站点 我正在使用我找到的任何JS代码片段来实现一些必要的功能,比如向锚链接添加平滑滚动,顶部偏移,因为我使用的是固定/粘性菜单 虽然这是一个单页网站,但我将隐私和条款作为单独的页面使用 这是我在主页上使用的锚链接代码。我认为它是JS和jQuery的混合体。它运行良好,符合我的要求Javascript 来自外部页面的锚定链接不';使用jQuery平滑滚动代码时不起作用,javascript,jquery,Javascript,Jquery,我不是JS开发人员,我正在使用Bootstrap构建一个带有锚链接的单页站点 我正在使用我找到的任何JS代码片段来实现一些必要的功能,比如向锚链接添加平滑滚动,顶部偏移,因为我使用的是固定/粘性菜单 虽然这是一个单页网站,但我将隐私和条款作为单独的页面使用 这是我在主页上使用的锚链接代码。我认为它是JS和jQuery的混合体。它运行良好,符合我的要求 $('.navbar a, .smooth-scroll-contact').on('click', function(event) {
$('.navbar a, .smooth-scroll-contact').on('click', function(event) {
/* Make sure this.hash has a value before overriding default behavior */
if (this.hash !== "") {
/* Prevent default anchor click behavior */
event.preventDefault();
/* Store hash */
var hash = this.hash;
/* Using jQuery's animate() method to add smooth page scroll. */
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 800, function(){
/* Add hash (#) to URL when done scrolling (default click behavior). */
if (history.pushState) {
history.pushState(null, null, hash);
}
else {
window.location.hash = hash;
}
});
} // End if
});
虽然它在主页上运行良好,但它阻止在隐私和条款页面上打开菜单链接。单击此处的菜单链接时,它不会执行任何操作。它不会进入主页或那里的任何锚链接
这是在“隐私”或“条款”页面上单击菜单链接时控制台中出现的错误:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (custom.js:39)
at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)
未捕获类型错误:无法读取未定义的属性“top”
在兰开夏。(custom.js:39)
在htmlanchorement.dispatch(jquery-3.4.1.min.js:2)
在htmlanchorement.v.handle(jquery-3.4.1.min.js:2)
第39行是滚动条:$(散列).offset().top-70
我搜索了这个错误,并尝试应用我找到的一些修复程序,但它们对我不起作用,或者我不知道如何为这个特定代码正确实现它们
补充说明:
- 如果我删除平滑滚动代码,问题就解决了李>
- 找到代码的
文件在custom.js
之前加载李> - jQuery是第一个加载的脚本
如果您需要更多信息,请告诉我。经过进一步研究,我终于找到了解决方案。以下是新代码,以防其他人遇到同样的问题:
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
// - 70 is the offset/top margin
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior), without jumping to hash
if (history.pushState) {
history.pushState(null, null, hash);
} else {
window.location.hash = hash;
}
});
return false;
} // End if
});
event.preventDefault()代码>似乎是问题所在,因此已将其删除<代码>返回false代码>已添加
另外,作为奖励,这里有一个代码,允许使用偏移量平滑滚动到外部页面的锚定链接:
$(window).on("load", function () {
var urlHash = window.location.href.split("#")[1];
if (urlHash && $('#' + urlHash).length) {
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top - 70
}, 800);
}
});