jQuery 平滑滚动不起作用答案

【问题标题】：jQuery Smooth Scrolling is not workingjQuery 平滑滚动不起作用
【发布时间】：2015-04-26 14:31:43
【问题描述】：

我有这个平滑滚动的代码：

$(".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> 知道如何使后面的链接起作用吗？

【问题讨论】：

一个有 2 个 ID 的元素？
id 只是一个：介绍，我在 url 中使用了额外的 # 作为我的 angular 应用程序的解决方法
这是什么解决方法？该选择器不会选择任何元素。
解决方法是在 angularjs 中处理锚散列链接
也许可以试试#home_intro

标签： jquery twitter-bootstrap hyperlink smooth-scrolling

【解决方案1】：

带有多个 # 的链接将无法解释为您尝试导航到的“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/

【讨论】：

通过放置断点，我可以看到控件甚至没有进入 onClick 函数
你能给我那个小提琴的链接吗？
在上面，动作包含在点击中，并按照您的要求发挥作用。

【解决方案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);
});

【讨论】：

控件甚至没有进入 onClick 函数！！
怎么样？ when selector is same which you've used in your question.
@SaurabhVerma 检查更新的有一些错字！