ajax加载后jQuery scrollTop不工作

After ajax load of html content I need to scroll to specific element. The element has attr data-event-id="" But sometimes this variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top; returns 0. Whole ajax code is:

在ajax加载html内容之后，我需要滚动到特定的元素。元素有attr数据事件id=""，但有时这个变量$('.timelineToolPanel[data-event-id="' '+id+'"]).offset().top;返回0。整个ajax代码是:

function refreshContent(id)
{
    var scrollNumber = 0;

    $.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createAbsoluteUrl("user/ajaxEventLoad"); ?>',
        dataType:'html',
        success:function(data){
            $("#eventListBlock").empty().append(data);
            if(id!=null) {
                console.log(id);
                scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;
                console.log(scrollNumber);
                $("html, body").animate({
                    scrollTo: scrollNumber
                }, 1000, function() {
                    // alert("Finished animating");
                });
            }
        },
        error: function(data) { // if error occured
            alert("Error occured. please try again");
        }
    });
}

and html:

和html:

    <div id="eventListBlock">
            <?
            $this->renderPartial('/windows/timelineWindow', array(
                'dataProvider'=>$dataProvider
            ));
            ?>
        </div>

with rendering this part:

渲染这部分:

<div class="cd-timeline-block">
    <div class="cd-timeline-icon" style="background: <? echo $data->color ?>">
        <i class="fa fa-<? echo $data->icon ?>"></i>
    </div>

    <div class="cd-timeline-content">
        <div class="timelineToolPanel" data-event-id="<? echo $data->id ?>">
            <i class="fa fa-pencil timelineToolPanelEdit"></i>
            <i class="fa fa-trash timelineToolPanelDelete"></i>
        </div>

        <h2><? echo $data->title ?></h2>
        <p><? echo $data->content ?></p>
        <span class="cd-date"><? echo date("d. m. Y", strtotime($data->date_event)); ?></span>
    </div>
</div>

where #eventListBlock is fixed container.

其中#eventListBlock是固定容器。

1 个解决方案

#1

custom attributes in html have to be defined with "data-*", otherwise it won't work.

html中的自定义属性必须使用“data-*”来定义，否则将无法工作。

http://www.w3schools.com/tags/att_global_data.asp

name your attr in "data-event-id=" and it should do the job, even when i have not proofed the JS code :D

将attr命名为“data-event-id=”，它应该能够完成这项工作，即使我还没有对JS代码:D进行校对

#1