Question

我一直在尝试研究堆栈溢出已经有一段时间了，但考虑到我并不能说流利的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" 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>

浏览器会知道去哪里

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

1 个答案: