Question

我有这个代码用于平滑滚动：

$(".navbar-nav li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    }, 1000);
});

适用于<li><a href="#intro">Intro</a></li>等链接，但它似乎不适用于以下链接：<li><a href="#home#intro">Intro</a><li> 知道如何让后面的链接工作吗？

Answer 1

多个＃的链接将无法解释为什么＆＃34; this.hash＆＃34;你正试图导航到......也许这样的事情可能有用：

$(".navbar-nav li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    hash = this.hash.split('#');
    $('html, body').animate({
        scrollTop: $('#' + hash[1]).offset().top
    }, 1000);
});

演示：https://jsfiddle.net/f31m3h6L/1/

Answer 2

双哈希不是个好主意我认为你应该使用数据属性来查找ID。

顺便说一句，你可以尝试这个并保持#intro作为最后一个值！

jQuery(".navbar-nav li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    var hash_array = this.hash.split('#');
    var hash = hash_array[hash_array.length - 1];
    jQuery('html, body').animate({
        scrollTop: jQuery('#' + hash).offset().top
    }, 1000);
});

jQuery Smooth Scrolling不起作用

2 个答案: