滾動到頂部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加載新數據時滾動到頂部。請告訴我代碼/腳本如何完成此操作。謝謝。

來源

2016-07-31 kkambi

只使用'$（「＃mainDiv」）的CSS（「頂」，0）;' – Thinker

在我的代碼上面的哪一行是否必須插入？ – kkambi

在settimeout函數後添加 – Thinker

滾動到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>

來源

2016-07-31 14:02:55

謝謝，但仍然沒有運氣，請問有沒有其他方法可以做到這一點？看起來我錯過了我的代碼中的一些東西。你能爲我確定嗎？ – kkambi

你在你的代碼中應用了演示嗎？你能分享你的工作嗎？所以我可以確定。 –

是的，我申請但沒有工作。我怎麼能在這裏發佈我的代碼給你看。？ – kkambi

您可以使用一個簡單的代碼如下所示

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

來源

2016-07-31 14:09:47 Shivakrishna

謝謝，但仍然沒有運氣，請問有沒有其他方法可以做到這一點？ – kkambi

滾動到頂部DIV

回答

相關問題