jQuery点击菜单实现平滑滚动

Question

当我的jQuery平滑滚动时

<a href="#services">Services</a>

但是我希望在网页滚动时能够平滑滚动。

<a href="http://website.com/#services">Services</a>

这个标记语言。这是可能的吗？

我正在使用的jQuery。

$('.nav a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
}); 

- Rasel Ahmed

---

http://website.com/#services 是任何一个网站吗？还是你可控制的网站？ - Sandy Gifford

它是一个示例域名。正确的答案适用于任何域名。 - Rasel Ahmed

Answer 1

你可以使用substr()从你的href中提取目标字符串：

$('.nav a').click(function (e) {
    var linkHref = $(this).attr("href");
    var idElement = linkHref.substr(linkHref.indexOf("#"));
    $('html, body').animate({
        scrollTop: $(idElement).offset().top
    }, 1000);
    return false;
});

实时示例

- EdenSource

---

谢谢。它正在工作。但是当我在href中使用完整的URL时，Bootstrap的滚动监听不起作用。有什么想法吗？ - Rasel Ahmed

当使用 <a href="#services">Services</a> 时，滚动监听功能是正常的，但当使用 <a href="http://website.com/#services">Services</a> 时，它不起作用。 - Rasel Ahmed

尝试使用 e.preventDefault() ：https://jsfiddle.net/n4kxctcm/1/ （别忘了在函数中添加 e：$('.nav a').click(function (e)） - EdenSource

这是因为 preventDefault() 的缘故。你可以尝试给外部 A 标签添加一个类，并使用 .not('.yourClass') 选择器：https://jsfiddle.net/6urje8mr/ - EdenSource

你可以尝试使用.eq()来排除特定的索引，或者排除文本匹配Google.com的A标签。这是我能想到的唯一解决方法。 - EdenSource