Scroll to specific item using JS/Jquery

Question

I have a div which looks like below. When a user clicks on alphabets from left, the right side should scroll to that alphabet heading.

<div class="left">
    <ul class="letters">
        <li>
            <a href="#letter-A">A</a>
        </li>
        <li>
            <a href="#letter-B">B</a>
        </li>
    </ul>
</div>
<div class="right brands-scroll" style="max-height: 320px;overflow-y: scroll;">
    <ul>
        <li><h3 id="letter-A">A</h3></li>
        <li>Apple</li>
        <li>Alphanso</li>
        <li><h3 id="letter-B">B</h3></li>
        <li>Ball</li>
        <li>Banana</li>
    </ul>
</div>

Jquery code

$('ul.letters li a').on('click', function (t) {
    t.preventDefault();
    var targetSec = $(this).attr('href');
    $('.brands-scroll').stop().animate({
        scrollTop: $('#' + targetSec).offset().top
    }, 500);
});

I tried this solution, but it didn't work properly jQuery scroll to element

It would be great if you provide jquery code that you tried. — Developer107
– Developer107, Commented Apr 11, 2016 at 9:11
$(this).attr('href') will give you '#letter-A' for instance which is then added with selector again as $('#'+'#letter-A') Please remove the extra # — Developer107
– Developer107, Commented Apr 11, 2016 at 9:18
@Developer107 the fiddle you provided is wrong. Click on A twice. It will break. — Rino Raj
– Rino Raj, Commented Apr 11, 2016 at 9:34

Rino Raj · Accepted Answer · 2016-04-11 09:15:14Z

4

Try this:

$(".letters li a").click(function() {
  var container = $('.right'),id = $(this).attr('href'),
    scrollTo = $(id);

  container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  });
});

Click on any of the alphabet in the demo and you can see the result.

Working Demo

answered Apr 11, 2016 at 9:15

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scroll to specific item using JS/Jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related