2016-07-31 134 views
2

滚动到顶部DIV

<script type="text/javascript"> 
 

 
    $(document).ready(function(){ 
 
     refreshTable(); 
 
    }); 
 

 
    function refreshTable(){ 
 
     $('#mainDiv').load('home.php', function(){ 
 
      setTimeout(refreshTable, 5000); 
 
     }); 
 
    } 
 
</script>

嗨,我有这个1.PHP代码/脚本,从2.PHP加载内mainDiv内容每5秒。现在我想让mainDiv在每次从div中的2.php加载新数据时滚动到顶部。请告诉我代码/脚本如何完成此操作。谢谢。

+0

只使用'$( “#mainDiv”)的CSS( “顶”,0);' – Thinker

+0

在我的代码上面的哪一行是否必须插入? – kkambi

+0

在settimeout函数后添加 – Thinker

回答

0

滚动到div顶部将使用下面的代码。

$('html, body').animate({ 
    scrollTop: $('#mainDiv').offset().top 
}, 'slow'); 

请检查下面的代码片段以获得全面理解。我已经在div中输入了虚拟数据,所以你可以得到滚动div的想法。

$(document).ready(function(){ 
 
    refreshTable(); 
 
}); 
 

 
function refreshTable(){ 
 
    $('#mainDiv').load('test.php', function(){   
 
     $('html, body').animate({ 
 
      scrollTop: $('#mainDiv').offset().top 
 
     }, 'slow'); 
 
     setTimeout(refreshTable, 5000); 
 
    }); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainDiv"> 
 
    
 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
Why do we use it? 
 

 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 
</div>

+0

谢谢,但仍然没有运气,请问有没有其他方法可以做到这一点?看起来我错过了我的代码中的一些东西。你能为我确定吗? – kkambi

+0

你在你的代码中应用了演示吗?你能分享你的工作吗?所以我可以确定。 –

+0

是的,我申请但没有工作。我怎么能在这里发布我的代码给你看。? – kkambi

2

您可以使用一个简单的代码如下所示

$('html,body').animate(
{ scrollTop: $("#div_id").offset().top - 30}, 'slow'); 
+0

谢谢,但仍然没有运气,请问有没有其他方法可以做到这一点? – kkambi