![](/img/trans.png)
[英]scrollTop() not working after applying overflow values with jQuery?
[英]jQuery scrollTop after ajax load not working
在ajax加载html内容后,我需要滚动到特定元素。 该元素具有attr data-event-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");
}
});
}
和HTML:
<div id="eventListBlock">
<?
$this->renderPartial('/windows/timelineWindow', array(
'dataProvider'=>$dataProvider
));
?>
</div>
渲染这部分:
<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>
其中#eventListBlock是固定容器。
html中的自定义属性必须使用“data- *”定义,否则它将无效。
http://www.w3schools.com/tags/att_global_data.asp
在“data-event-id =”中命名你的attr并且它应该完成这项工作,即使我没有证明JS代码:D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.