Question

我在这里遇到的问题是如何滚动到另一个关闭时单击的div的顶部。如果没有div打开，我可以使它工作，但如果一个它无法滚动到新打开的div的顶部。我假设我需要通过旧的开放div来抵消。不知道如何去做。这是便于参考的小提琴 - http://jsfiddle.net/dnym5p1s/3/

缩短代码： HTML：

<div class="option-heading">
 <h1>Year1 <span class="arrow-up">&#9650;</span><span class="arrow-down">&#9660;</span></h1>
</div>
<div class="option-content">ContentContentContent <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content</div>

<div class="option-heading">
     <h1>Year2 <span class="arrow-up">&#9650;</span><span class="arrow-down">&#9660;</span></h1>
</div>
<div class="option-content">Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />vContent <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br /></div>

CSS：

.option-heading h1 {
    margin:0;
    padding:8px 5px;
    font-size:19px
}
.option-content h4 {
    color: #900027;
    font-weight: bold;
    margin:25px 0 0
}
.option-content p {
    margin-top:0
}
.option-content {
    border-bottom: 10px solid #800202;
    border-top: 10px solid #800202;
}
.arrow-up,.arrow-down{color:#647f8a;cursor:pointer;width:20px; font-size:10px; padding:0 0 0 10px;vertical-align:middle}

jQuery的：

$('.option-content,.arrow-up, .arrow-down:first').hide();
$('.option-content:first,.arrow-up:first').show();
$('.option-heading').click(function () {
    $('.option-content').not($(this).next()).slideUp(250);
    $('.option-heading').not(this).find('span.arrow-up').hide();
    $('.option-heading').not(this).find('span.arrow-down').show();
    $(this).next('.option-content').slideToggle(250);
    $(this).find('.arrow-up, .arrow-down').toggle();
//Jump to Open Div
    $('html,body').animate({scrollTop: $(this).offset().top - 10}, 'fast');
});

Answer 1

问题不在于你必须用旧的开放div来抵消：如果旧的开放div高于新的div，这只是一个问题，这意味着它是新的div在相关位置发生变化的问题。动画。（如果旧div低于新div，则在动画期间新div的位置不会改变。）

要解决此问题，您需要queue动画，以便在旧的div关闭之后滚动。

Answer 2

隐藏内容后，存储每个option-heading的顶部偏移量：

$('.option-content,.arrow-up, .arrow-down:first').hide();

$('.option-heading').each(function() {
  $(this).data('top', $(this).offset().top - 10);
});

然后，您可以将scrollTop设置为该位置的动画：

$('html,body').animate({scrollTop: $(this).data('top')}, 'fast');

Working Fiddle

Answer 3

我的方法是给标题一个id

<h1 id="4">Year4 ....

并使用loaction属性导航到

yoururl.com/index.html#4

就像一个魅力..也许不是在jsfiddle艰难

滚动到单击/打开div并按先前打开的div偏移

3 个答案: