Question

我不是JS开发人员，并且我正在使用Bootstrap构建带有锚链接的单页网站。

由于我使用的是固定/粘滞菜单，因此我会使用发现的JS代码的一些点点滴滴，以提供一些必要的功能，例如向锚链接添加平滑滚动，并且顶部偏移。

虽然这是一个一页的网站，但我将“隐私”和“条款”作为单独的页面使用。

这是我用于主页锚链接的代码。我认为这是JS和jQuery的混合。效果很好，而且是我想要的方式。

 $('.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)

第39行是scrollTop: $(hash).offset().top - 70。

我搜索了此错误，并尝试应用发现的一些修复程序，但是它们对我不起作用，或者我不知道如何针对此特定代码正确实现它们。

其他说明：

如果我删除了平滑的滚动代码，问题就解决了；
找到代码的custom.js文件在</body>之前加载；
jQuery是第一个加载的脚本。

如果您需要更多信息，请告诉我。

Answer 1

经过更多研究，我终于设法找到了解决方案。这是新的代码，以防其他人遇到相同的问题：

$('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();似乎是问题所在，因此已将其删除。 return 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);
    }
});

使用jQuery平滑滚动代码时，来自外部页面的锚定链接不起作用

1 个答案: