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
        })
    }
});

演示：Fiddle

jquery slide属性具有特定的数据属性值

1 个答案: