滚动到每个元素的顶部，滚动不起作用

Question

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);
  });
  });

滚动效果不佳，第一项没问题，但当我继续点击下一个元素时，滚动根本不起作用。我想单击每个项目，它会滚动到顶部，以便用户可以看到他们打开的内容。

Here is my fiddle link

Answer 1

你的滚动动画是在滑动函数完成之前触发的，你必须在滑动回调中触发滚动动画

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);
        });
    }

检查此 fiddle 以获得修复 http://jsfiddle.net/dcy13sng/

滚动到每个元素的顶部，滚动不起作用

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

html

css

jquery

scroll