jQuery 平滑滚动不起作用

Question

我有平滑滚动的代码：

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

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

Answer 1

带有多个 # 的 link 将无法解释为 "this.hash" 您正尝试导航到的内容...也许这样的方法可能有效：

$(".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 平滑滚动不起作用

jQuery Smooth Scrolling is not working

jquery

twitter-bootstrap

hyperlink

smooth-scrolling