CODEWITHSUNDEEP
javascriptjquerycsshtml
user2618529
user2618529

Reputation:

JQuery.animate(): HTML5 annimation with JQuery

I have a page with height animation on JQuery 2. But then element clicked, i've couldn't see this, because page momentaly scrolls to top of the page. I have next page:

<a href="#" class="infoSlider" id="sl00013" onClick="onSliderClick('match0013', 'sl00013')"></a>

And JavaScript code is:

function onSliderClick(divId, slId) {

        var h1 = $( "div.bet .header" ).outerHeight(); 
        var h2 = $( "div.bet .line" ).outerHeight();
        var h = h1 + h2*4;

        $( "#" + divId ).animate({

                height: h
              }, 400, function() {
                    document.getElementById(slId).onclick = function() { onSliderClick_Up(divId, slId);};
        });

    }

    function onSliderClick_Up(divId, slId) {

        var h1 = $( "div.bet .header" ).outerHeight(); 
        var h2 = $( "div.bet .line" ).outerHeight();
        var h = h1 + h2;

        $( "#" + divId ).animate({
                height: h
              }, 400, function() {
                        document.getElementById(slId).onclick = function() { onSliderClick(divId, slId);};
        });

    }

Why its scrolls to top? And How I can solve this problem.

Upvotes: 0

Views: 57

Answers (3)

Jason Miller
Jason Miller

Reputation: 2314

Pick any of these:

  1. Remove the href attribute:
  2. Return false from your event handler
  3. Call event.preventDefault() as @Kos mentioned

No comment on why you're using on* attributes

Upvotes: 1

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

You will need to prevent the default href by doing:

$('.infoSlider').on('click',function(e){
    e.preventDefault();
});

Upvotes: 0

Kos
Kos

Reputation: 72271

It scrolls to the top because you have href=# in there. If it was href="http://google.com" or anything like that, the browser would go there.

Attach your event handler with elt.on('click', function(event) {...}) and call event.preventDefault() to prevent the link from behaving the normal way.

Upvotes: 0

Related Questions