Panos Panos - 5 months ago 8
jQuery Question

Add scrolling effect to all anchors except of one

I have a menu which has some menu items. All of them are defined like so:

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


except on of them which links to a pdf:

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


Now I want to add some smooth scrolling to my page when those anchores are clicked except of the one that links to the pdf. I have the following jQuery code that adds the scrolling effect but disables the opening of the pdf file in a new tab. Here is my code that implements the scrolling.

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

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


Any ideas how to add the scrolling effect for all the anchrors except of the one that links the pdf??Thanks!

Answer

you can put an id to this link and then in your code:

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

and then:

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

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

    event.preventDefault();

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