javascriptjqueryhtmlcssbutton

Download a file and scroll to bottom div on link click


On link click, I want the user to download a file (in the href). On that same click, at the same time, I want to scroll them down the page to a form.

Based on my code, I can only do one or the other. I'm unable to perform both actions.

HTML

<a href="http://www.cdc.gov/animalimportation/images/dog2.jpg" download="dog2.jpg"
    class="scroll-to-bottom-link">Scroll to bottom</a>
<p>here is some secondary information</p>

jQuery

$('.scroll-to-bottom-link').click(function(){
$('html, body').animate({scrollTop : $('body').height() }, 800);
return false;
});

Any ideas on how to do this? Other options I've found use href="#", but I need that for my download.


Solution

  • I would put a div in the a tag and attach the event to it

       <a href="http://www.cdc.gov/animalimportation/images/dog2.jpg" download ><div class="scroll-to-bottom-link">Scroll to bottom</div></a>
        <p>here is some secondary information</p>
    

    and then remove the remove false from the function.

    $('.scroll-to-bottom-link').click(function(){
        $('html, body').animate({scrollTop : $('body').height() }, 800);
    });
    

    JSFiddle