[英]How to animate scroll to div in jQuery?
I've been trying to research that on stack overflow for quite some time now but given that I don't really speak jquery fluently, I can't seem to get it to work. 我已经尝试研究堆栈溢出问题已有一段时间了,但是鉴于我并不是真的能流利地说jQuery,所以我似乎无法使其正常工作。
The question is, how do I scroll smoothly from the top of the page to a div? 问题是,如何从页面顶部平滑滚动到div? I have managed to do it in scrollTop, but fail to apply similar code to my scroll to div code.
我已经设法在scrollTop中做到了,但是未能将类似的代码应用于我的滚动到div代码。
I have a series of entries in my Portfolio website with links that scroll down to the gallery div: 我在我的投资组合网站中有一系列条目,这些链接向下滚动到Gallery div:
$(".button7").click(function() {
$(".g7").show()
$(window).scrollTop($(".g7").offset().top);
return false;
});
And the html: 和html:
<div class="button7">
<div class="gallery"><br>
<a href="#" style="cursor:s-resize"><i>gallery</i> ↓</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> ↑</a>
</div>
Scroll top: 滚动顶部:
$('.scroll').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
I have managed to make the body move to the .g7 when .button7 is clicked, but every attempt to animate this action fails. 单击.button7时,我设法使主体移动到.g7,但是使该动作动起来的所有尝试均失败。
i have similar action in my project and jquery code is like this: 我在我的项目中有类似的操作,jQuery代码是这样的:
$('html, body').animate({ scrollTop: $('#sonuc_grid').offset().top }, 'slow');
However to move to that div you need to give it a tab index like below: 但是,要移至该div,您需要为其提供一个选项卡索引,如下所示:
<div id="sonuc_grid" tabindex=44></div>
that way browser will know where to go 这样浏览器就会知道去哪里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.