javascript - 如何在 jQuery 中实现滚动到 div 的动画？

Question

我已经尝试研究堆栈溢出有一段时间了，但考虑到我并没有真正流利地讲 jquery，我似乎无法让它工作。

问题是，如何从页面顶部平滑滚动到div？我已经设法在scrollTop 中做到这一点，但未能将类似的代码应用到我的scroll to div 代码中。

我的作品集网站中有一系列条目，其中的链接可向下滚动到图库 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>

这样浏览器就会知道去哪里