滚动以点击/打开div和由先前打开的div偏移

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

缩短代码： 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'); 
});

来源

2015-02-24 RooksStrife

隐藏的内容后，存储上每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

来源

2015-02-24 21:46:47

这正是我期待的。 – RooksStrife 2015-02-24 21:49:07

我的做法是给标题为ID

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

，并与loaction属性导航到

yoururl.com/index.html#4

的作品就像一个魅力..也许不是的jsfiddle艰难

来源

2015-02-24 21:16:01 Joniras

请注意，您的ID可以首先在HTM5中使用非字母字符，而不是以前版本的HTML。 – 2015-02-24 21:19:28

的问题不在于你的老开放div来弥补：如果旧的开放div高于新的开放div，这只是一个问题，这意味着它是动画期间新的div的相对位置改变的问题。（如果旧格低于新的，新的div的位置没有动画过程中发生变化。）

为了解决这个问题，就需要queue动画，这样滚动发生后老格关闭。

来源

2015-02-24 21:19:29 AJFarkas

我会仔细看看队列，因为它似乎是解决方案 - 在关闭后进行滚动。出于好奇心，是否没有办法容纳旧的div的高度，并且只有当div高于那个值时才用该值动态地补偿scrollto？这不是好的做法，但我想看看有人会这样做。 – RooksStrife 2015-02-24 21:46:46

滚动以点击/打开div和由先前打开的div偏移

回答

相关问题