jquery - jquery滑动到具有特定数据属性值的属性

Question

好的，所以我有以下带有绝对网址的导航：

<ul class="nav navbar-nav" id="main-menu">
    <li class="first active"><a href="http://example.com/" title="Home">Home</a></li>
    <li><a href="http://example.com/about.html" title="About">About</a></li>
    <li><a href="http://example.com/portfolio.html" title="Portfolio">Portfolio</a></li>
    <li class="last"><a href="example.com/contact.html" title="Contact">Contact</a></li>
</ul>

然后是具有以下数据属性的文章：

<article class="row page" id="about" data-url="http://example.com/about.html">
    <div class="one">

    </div>
    <div class="two"

    </div>
</article>

当您单击菜单中的链接时，我想忽略它是超链接的事实，并根据其属性 data-url 滑动到当前文章。

我从我认为显而易见的事情开始：

$('#main-menu li a').on('click', function(event) {
    event.preventDefault();
    var pageUrl = $(this).attr('href');

)};

并尝试了查找和动画，但后来我不知道如何使用 data-url="http://example.com/about.html" 引用该文章。

非常感激任何的帮助。

谢谢

Answer 1

尝试

$('#main-menu li a').on('click', function (event) {
    event.preventDefault();
    var pageUrl = $(this).attr('href');
    var $article = $('article[data-url="' + pageUrl + '"]');
    if ($article.length) {
        $('body').stop(true).animate({
            scrollTop: $article.position().top
        })
    }
});

演示：小提琴