如何在jQuery中动画滚动到div？

Posted 2023-05-08

【中文标题】如何在jQuery中动画滚动到div？

【英文标题】：How to animate scroll to div in jQuery?

【发布时间】：2016-05-11 00:37:21

【问题描述】：

我一直在尝试研究堆栈溢出的问题已经有一段时间了，但鉴于我并不能真正流利地说 jquery，我似乎无法让它工作。

问题是，如何从页面顶部平滑滚动到 div？我已经设法在 scrollTop 中做到了，但未能将类似的代码应用于我的滚动到 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"  style="display: block;">
    <img src="Images/break.png"  style="display: block;">
    <img src="Images/7.2.jpg"  style="display: block;">
    <img src="Images/break.png"  style="display: block;">
    <img src="Images/7.3.jpg"  style="display: block;">
    <img src="Images/break.png"  style="display: block;">
    <img src="Images/7.4.jpg"  style="display: block;">
    <img src="Images/break.png"  style="display: block;">
    <img src="Images/7.5.jpg"  style="display: block;">
    <img src="Images/break.png"  style="display: block;">
    <img src="Images/7.6.jpg"  style="display: block;">
    <img src="Images/break.png"  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，但每次尝试为该动作设置动画都失败了。

【参考方案1】：

我的项目中有类似的操作，jquery代码是这样的：

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

但是要移动到那个 div，你需要给它一个标签索引，如下所示：

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

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

【讨论】：

成功了！非常感谢！！！不过，我不必给它一个标签索引。再次感谢！！

很高兴能帮上忙