jQuery显示隐藏内容,然后自动滚动到内容的中间
我设置了一个按钮,单击该按钮会展开页面。这是代码:
/*Source:http://rpardz.com/blog/show-hide-content-jquery-tutorial*/
jQuery('.open-content').hide().before('<div class="container_12"><a href="#" id="toggle-content" class="button"><div id="expand-button" ></div></a></div><div id="toggle-top" style="width:100%"></div>');
jQuery('a#toggle-content').click(function() {
jQuery('.open-content').slideToggle(1000);
return false;
});
正如您所看到的,它工作得很好: 隐藏: http://cl.ly/101v0N0W1z2D2e0x3a0j 展开:<一href="http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G" rel="nofollow">http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G
注意(参见图像侧面的滚动条)页面底部如何展开显示更多内容;我不明白的是如何使页面在页面完成扩展后自动滚动到现在可见内容的底部。
我使用这个标准脚本来平滑滚动到页面上的位置。
/*Source: http://goo.gl/DaRfF */
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
但我不知道如何集成它,以便它在完成扩展后自动滚动到内容的底部。非常感谢所有帮助,谢谢!
I have a button set up that when clicked, expands the page. Here is the code:
/*Source:http://rpardz.com/blog/show-hide-content-jquery-tutorial*/
jQuery('.open-content').hide().before('<div class="container_12"><a href="#" id="toggle-content" class="button"><div id="expand-button" ></div></a></div><div id="toggle-top" style="width:100%"></div>');
jQuery('a#toggle-content').click(function() {
jQuery('.open-content').slideToggle(1000);
return false;
});
It works nicely as you can see: Hidden: http://cl.ly/101v0N0W1z2D2e0x3a0j Expanded: http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G
Notice (see the scroll on the side of the images) how the bottom of page expands to show more content; what I can't figure out is how to make the page auto scroll to the bottom of the now visible content after the page finishes expanding..
I use this standard script to smooth scroll to places on the page..
/*Source: http://goo.gl/DaRfF */
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
but I cannot see how to integrate this so that it automatically scrolls to the bottom of the content after it finishes expanding. All help is greatly appreciated, thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
像这样的事情怎么样?
what about something like this?