show/hide an overflow div on anchor

Question

I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well...

https://stackoverflow.com/a/7513110/3703099

My code : http://jsfiddle.net/0sq2rfcx/9/

As you can see, when you click on button it scroll to the anchor, but if you click again, it scroll to an other position... I would like to make it stay on the current anchor if you keep clicking the button.

Can you help me to find what I did wrong plz ?

$('#b1').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a1').offset().top);
});
$('#b2').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a2').offset().top);
});
$('#b3').click(function() {
  $('#result').show();
  $('#result').scrollTop($('#a3').offset().top);
});

#result {
  display: none;
  height: 200px;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='b1'>b1</button>
<button id='b2'>b2</button>
<button id='b3'>b3</button>
<button onclick="$('#result').hide();">hide</button>
<div id='result'>
  <p>bla 0</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a1'>bla 1</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a2'>bla 2</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p id='a3'>bla 3</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

make sure that `anchor top position` exceeding the resulr container height or not, if exceed do some logic. — Selva, Jun 22 '15 at 09:33

score 2 · Accepted Answer · answered Jun 22 '15 at 09:42

I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/

This should work on all browsers included IE7

$('#b1').click(function () {
$('#result').show();
$("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow");
});
$('#b2').click(function () {
    $('#result').show();
    $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow");
});
$('#b3').click(function () {
    $('#result').show();
    $("#result").animate({ scrollTop:$('#a3').parent().scrollTop() + $('#a3').offset().top -     $('#a3').parent().offset().top}, "slow");

Thanks for the solution :) It looks like it was the parent position who make same conflict, do all the calcul as you did fix it :) — Luckyn, Jun 22 '15 at 09:47

score 1 · Answer 2 · answered Jun 22 '15 at 09:30

1

You can use position instead to scroll like one below:

DEMO HERE

$('#b1').click(function () {
    $('#result').show();
    $('#result').animate({
        'scrollTop' : $("#a1").position().top-10 //-10 here is just to set it in view!!
    });
});

Added animation for smoothness

answered Jun 22 '15 at 09:30

Guruprasad J Rao

29,410
14
101
200

There is a mistype in your jsfiddle demo (and in the question). Last click function should bind #b3. Otherwise works fine. – JeffT Jun 22 '15 at 09:35
1

miss bind fix, and animate is good idea, thanks. But when you click again on the button it scroll again to an other position. I want it not moove if you keep clicking on the button. – Luckyn Jun 22 '15 at 09:45
I agree!! because of the improper heights here you need to calculate all the stuffs and then scroll to actual position as @Negom said!! Anyways!! Happy Coding.. :) – Guruprasad J Rao Jun 22 '15 at 09:49

show/hide an overflow div on anchor

2 Answers2