为除一个以外的所有锚点添加滚动效果

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

你可以给这个 link 添加一个 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 2

您可以使用 :not() Selector to select all elements except the one that has target="_blank" a:not([target="_blank"]) or select all elements except the one that has href starts with pdf 'a:not([href^="pdf"])'

$(document).on('click', 'a:not([target="_blank"])', function(event){
    event.preventDefault();

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

Answer 3

将 class 添加到您希望平滑滚动发生的所有锚点和

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

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

为除一个以外的所有锚点添加滚动效果

Add scrolling effect to all anchors except of one

html

javascript

pdf

anchor

jquery