Question

我有一个包含一些菜单项的菜单。所有这些都是这样定义的：

<li><a href="#about" target="_self" title="about">About</a></li>

除了它们链接到pdf：

<li><a href="pdf/theDocument.pdf" target="_blank">My Pdf</a></li>

现在我想在点击那些链接到pdf的之后添加一些平滑滚动到我的页面。我有以下jQuery代码添加滚动效果但禁用在新选项卡中打开pdf文件。这是我实现滚动的代码。

$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
});

任何想法如何为除了链接pdf的那个之外的所有锚点添加滚动效果？谢谢！

Answer 1

您可以使用:not() Selector选择除a:not([target="_blank"]) 'a:not([href^="pdf"])'之外的所有元素，或选择除href starts with pdf $(document).on('click', 'a:not([target="_blank"])', function(event){ event.preventDefault(); $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 700); });之外的所有元素

nil

Answer 2

您可以在此链接中输入ID，然后在您的代码中输入：

<li><a href="pdf/theDocument.pdf" id="pdfId" target="_blank">My Pdf</a>

然后：

$(document).on('click', 'a', function(event){

    if (event.target.id === 'pdfId') {
       return;
    }

    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
});

Answer 3

将类添加到您希望在其上进行平滑scrool的所有锚点

$(document).on('click', '.classYouAdded', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
});

将滚动效果添加到除

3 个答案: