Scroll div position to element inside

Question

I have a div box with different element inside and I want to move to each of these from an index, but my code works only first time...

This is a sample

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('#panel').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style="width: 500px; height:500px; border:1px solid #eee; display:flex">
  <div style="width:100%; overflow-y:auto;" id="panel">

    <a href="#" id="item_a" style="margin:500px 0; display:block;">item1</a>
    <a href="#" id="item_b" style="margin:500px 0; display:block;">item2</a>
    <a href="#" id="item_c" style="margin:500px 0; display:block;">item3</a>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>

Spies · Answer 1 · 2018-10-21T14:11:26.253

0

Try doing like this:

 $('html, body').animate({
    scrollTop: $("#item_"+id).offset().top - 100
 }, 1000, 'swing');

Since you want to animate is the html and body, not the panel.

Btw, I noticed this question could be answered using this: jQuery scroll to element ;)

UPDATE:

I remember now (after testing again) that I changed your to a . I also deleted some styles from your original main divs. In case you can't run it like this, let me know and we can try another thing.

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('html, body').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="panel">

    <div id="item_a" style="margin:500px 0; display:block;">item1</div>
    <div id="item_b" style="margin:500px 0; display:block;">item2</div>
    <div id="item_c" style="margin:500px 0; display:block;">item3</div>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>

edited Oct 21 '18 at 14:11

answered Oct 20 '18 at 21:14

Spies

27
5

not working... clicking on the index nothing happens – FireFoxII Oct 20 '18 at 23:29
@FireFoxII Your HTML is only this? I used jsfidde yesterday and it worked for me, but I only used the code you provided. If you have more in your page it could be affecting. – Spies Oct 21 '18 at 12:54
Yes is this... Can you provide a snippet or a jsfiddle where your correction is working? – FireFoxII Oct 21 '18 at 13:42
why this? You must use my div structure. I have an index and my panel div must scroll based on click... With your sample I must always go to bottom of page and I know that this is working... – FireFoxII Oct 21 '18 at 14:35
Even with your example I need to go to the bottom of the page. Your menu could be above the panel. You can keep your style and tried change the elements to
Did you tried?
– Spies Oct 21 '18 at 16:19
I need to have always index under my eyes and move panel based on index click – FireFoxII Oct 22 '18 at 13:05

Scroll div position to element inside

1 Answers1