jQuery显示隐藏内容，然后自动滚动到内容的中间

发布于 2024-11-28 09:51:21 字数 1129 浏览 6 评论 0原文

我设置了一个按钮，单击该按钮会展开页面。这是代码：

/*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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心如荒岛 2024-12-05 09:51:21

像这样的事情怎么样？

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});

what about something like this?

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});

回复收藏 0 原文

~没有更多了~