滾動以點擊/打開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偏移

回答

相關問題