Question

我有一系列div，点击后，切换可折叠div的状态（如手风琴小部件）。这工作正常，但我希望能够在用户点击时滚动到触发器div的顶部（类名为'panelTab'的div）。问题是当面板被隐藏时，它们不占用空间，因此jQuery不会自动“知道”页面的大小，并且无法自动计算到元素的顶部。所以会发生什么，点击它滚动，但它“超过”窗口的顶部，落在段落内容的中间。我被困 - 有人知道一个简单的解决方案吗？提前谢谢。

<div class="panelTab first holder">
<div class="text-block"> <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div> </div>
 <div class="animatedPanel"> <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.    </p></div>



<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM </h3><p class="sub- title">Lorem Ipsum Dolor</p> </div>

<div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>

<div class="panelTab holder"><div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>

<div class="panelTab holder">   
<div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>

和jQuery：

$('.animatedPanel').hide();
$('.panelTab').click(function() {
$('.panelTab').removeClass('active');
$(this).toggleClass('active');
var panel = $(this).next()
$('.animatedPanel').not(panel).slideUp();
panel.slideToggle({
    direction: "up"
}, 100);
$('html, body').animate({
     scrollTop: $(this).offset().top
}, 200);   
});

http://jsfiddle.net/rmLo2n07/

Answer 1

尝试更改隐藏元素的样式 position：absolute，display：block，visibility：hidden 然后计算它的高度并恢复它的旧样式

如何使用Jquery滚动到具有可折叠面板的元素顶部

1 个答案: