Question

手风琴有问题。我有一个用户可以在其上（在我的页面底部）clic，并滚动内容。我的问题是：一切正常，但我必须手动滚动才能看到滚动的内容。我不知道该怎么办。我已经尝试切换而不是slideUp，创建一个＆＃34; push＆＃34; div ..但是不行。

请参阅下面的代码。

＆＃13;

$(document).ready(function() {
  $('.accordeon').hide(); // hide the content of .accordeon
  $('h4').click(function() { // when clic on h4
    $(this).next('div:hidden').slideDown() // roll the div
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
	
					
<h4>CLIC HERE</h4>
<div class="accordeon">
	<img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg" alt="Metz" width="300" height="225" />
</div>

＆＃13;

转到页面底部，链接上的clic，你可以看到你有滚动条来查看隐藏内容。如何自动完成？

我认为最好的解决方案是＆＃34;当我在我的div上点击时，改变页面的位置＆＃34;但我不知道怎么做。

有人有这个问题吗？

非常感谢大家！

Answer 1

如果将id与div关联，则可以使用JQuery滚动到它。

Click here从Peter Ajtai的回答中了解更多信息。

Answer 2

在幻灯片功能之后，将页面滚动到元素的顶部。试试这个：

   $(document).ready(function() {
        $('.accordeon').hide(); // hide the content of .accordeon
        $('h4').click(function() { // when clic on h4
            $(".accordeon").slideToggle(function() {
                $('html, body').animate({
                    scrollTop: $(this).offset().top
                }, 500);
            });
        });
    });

Jquery slideUp底部页面

2 个答案: