如何在jQuery中滾動動畫到div？

Question

我已經嘗試研究堆棧溢出問題已有一段時間了，但是鑒於我並不是真的能流利地說jQuery，所以我似乎無法使其正常工作。

問題是，如何從頁面頂部平滑滾動到div？ 我已經設法在scrollTop中做到了，但是未能將類似的代碼應用於我的滾動到div代碼。

我在我的投資組合網站中有一系列條目，這些鏈接向下滾動到Gallery div：

$(".button7").click(function() {    
$(".g7").show()
$(window).scrollTop($(".g7").offset().top);
return false;
});

和html：

<div class="button7">
    <div class="gallery"><br>
    <a href="#" style="cursor:s-resize"><i>gallery</i> &darr;</a></div>
    </div>

<div class="g7"><br><br><br><br><br>
    <img src="Images/7.1.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.2.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.3.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.4.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.5.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.6.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <br>

    <a href="#" class="scroll" style="cursor:n-resize"><i>back to the top</i> &uarr;</a>
</div>

滾動頂部：

$('.scroll').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});

單擊.button7時，我設法使主體移動到.g7，但是使該動作動起來的所有嘗試均失敗。

Answer 1

我在我的項目中有類似的操作，jQuery代碼是這樣的：

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

但是，要移至該div，您需要為其提供一個選項卡索引，如下所示：

<div id="sonuc_grid" tabindex=44></div>

這樣瀏覽器就會知道去哪里