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

检查这个小提琴是否有http://jsfiddle.net/dcy13sng/

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

1 个答案: