jQuery page jumps to top before performing the animation

Question

I'm trying to make a slide up animation for my website.The core functionality is there but I have the problem, that whenever I click on one element (when the page is not on top) the page jumps to top and back and then makes the animation as intended. I have researched the last days but my problems seems to be unique so I decided to ask this question. This is what I've got:

<div class="content">
    <div class="inner_content">
        <div id="first" class="first"></div>
        <div id="second" class="second"></div>
        <div id="third" class="third"></div>
    </div>
</div>

The idea is to click on one div (first, second, third) and scroll it up with an offset of 130 px from top because of the navigationbar. This is my jQuery:

<script>
    $( "div.first").click(function(){
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top -130 
        }, 500);
        $( "div.second").click(function(){
            $("html, body").animate({
                "scrollTop": $("div.first").offset().top -130 
            }, 500);
            $( "div.third").click(function(){
                $("html, body").animate({
                    "scrollTop": $("div.first").offset().top -130 
                }, 500);
</script>

The problem is as said. the page jumps very fast to the top of the page and then back to the previous position. after that the slide up or down animation is very clean and smooth. I really don't know where the problem is. I hope anybody can help me. Thanks in advance.

Answer 1

You have missed some of the closing brackets.

$(document).ready(function () {
    $("div.first").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.second").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.third").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
});

Also, I did noticed that you trigger the animation on div.click, but if you ever do this on a anchor, it's nice to use event.preventDefault();