CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RooksStrife
RooksStrife

Reputation: 1747

Scroll to clicked/open div and offset by previously opened div

The issue I have here is how to scroll to the top of a div that is clicked on when the other one closes. I can make it work if no divs are open, but if one is it fails to scroll to the top of the newly opened div. I am assuming I need to offset by the old open div. Not sure how to go about it though. Here is the fiddle for easy reference - http://jsfiddle.net/dnym5p1s/3/

Shortened code: 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');
});

Upvotes: 0

Views: 99

Answers (3)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

After hiding the content, store the top offset of each option-heading:

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

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

You can then animate the scrollTop to that position:

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

Working Fiddle

Upvotes: 1

AJFarkas
AJFarkas

Reputation: 3149

The problem is not that you have to offset by the old open div: it's only a problem if the old open div is above the new one, which means that it's an issue of the relative location of the new div changing during the animation. (If the old div is below the new one, the location of the new div does not change during animation.)

To remedy this, you need to queue the animations, so that the scroll occurs after the old div closes.

Upvotes: 1

Joniras
Joniras

Reputation: 1336

My approach would be to give the headings a id 

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

and to navigate with the loaction attribute to 

yoururl.com/index.html#4

works like a charm.. maybe not in jsfiddle tough

Upvotes: 0

Related Questions