CODEWITHSUNDEEP
jqueryhtmlcssscroll
aiddev
aiddev

Reputation: 1429

scroll to each element's top, scroll doesn't work

jQuery(".event_item .event_title").each(function(){
jQuery(this).click(function(){
    var checkElement = $(this).next();  

    if(checkElement.is(':visible')) {
        checkElement.parent().find(".event_content").slideDown().slideUp('normal');
    }

    if(!checkElement.is(':visible')) {
        $(".event_item .event_title").parent().find(".event_content").slideUp('normal');
        checkElement.parent().find(".event_content").slideDown('normal');
    }


    var elID = jQuery(this).parent().attr('id');
    var fId = '#'+ elID;
    scrollTo = $(fId);  
    jQuery('html, body').animate({scrollTop:jQuery(fId).position().top }, 500);
  });
  });

Scrolling works bad, first item is ok, but when I continue clicking on next elements, scrolling isn't working at all. I want to click on each item and it scrolls to the top so users can see what they opened.

Here is my fiddle link

Upvotes: 0

Views: 45

Answers (1)

Vanojx1
Vanojx1

Reputation: 5574

your scroll animation was fired before the slide function finish, you ve to fire the scroll animation inside the slide callback

if(checkElement.is(':visible')) {
        checkElement.parent().find(".event_content").slideDown().slideUp('normal',function(){
             scrollAfter(this);
        });
    }

    if(!checkElement.is(':visible')) {
        $(".event_item .event_title").parent().find(".event_content").slideUp('normal');
        checkElement.parent().find(".event_content").slideDown('normal',function(){
            scrollAfter(this);
        });
    }

check this fiddle for the fix http://jsfiddle.net/dcy13sng/

Upvotes: 1

Related Questions