Question 35567 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why can't I scroll to the correct row ID using Jquery?

I am trying to replicate the code that was shown here: How to scroll to specific item using jQuery?

When I redo it using my site layout however, it does not scroll to the correct row ID (#row_15). How can I fix this?

Website layout

<div class="page-content">
<div id='row_1' asadasda></div>
<span id='row_2'><b>This text is bold</b></span>
<p id='row_3'><i>This text is italic</i></p>
<p id='row_4'><b>This text is bold</b></p>
<p id='row_5'><i>This text is italic</i></p>
<p id='row_6'><i>This text is italic</i></p>
<p id='row_7'><i>This text is italic</i></p>
<p id='row_8'><i>This text is italic</i></p>
<p id='row_9'><i>This text is italic</i></p>
<p id='row_10'><i>This text is italic</i></p>
<p id='row_11'><i>This text is italic</i></p>
<p id='row_12'><i>This text is italic</i></p>
<p id='row_13'><i>This text is italic</i></p>
<p id='row_14'><i>This text is italic</i></p>
<span id='row_15'><b>This text is bold 15</b></span>
<p id='row_16'><i>This text is italic</i></p>
<p id='row_17'><i>This text is italic</i></p>
<p id='row_18'><i>This text is italic</i></p>
<p id='row_19'><i>This text is italic</i></p>
<p id='row_20'><i>This text is italic</i></p>
<p id='row_21'><i>This text is italic</i></p>
<p id='row_22'><i>This text is italic</i></p>
</div>

My code

var container = $('.page-content');
    scrollTo = $('#row_15');
    container.animate({
      scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    });

Js fiddle

https://jsfiddle.net/boratsagdiyev/c58vfzq0/13/

Thanks

Tags:

3

Answers


  1. 0

    You either need to scroll on "html, body":

    var container = $("html, body");
    scrollTo = $("#row_15");
    container.animate({
      scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    });

    Or make your .page-content div actually have a scrollbar (try it out by giving it css with a height less than the height of the div, and an overflow-scroll property). See this jsfiddle for an example of that: https://jsfiddle.net/9x2t8h1z/

    Login or Signup to reply.
  2. 0

    You Should you "html, body" as container. Because you are changing the position of your "body" to the position you needed. The changes below makes it working.

    var container = $("html, body");
scrollTo = $("#row_15");
container.animate({
  scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
    Login or Signup to reply.
  3. 0

    You are not calling your JavaScript Code anywhere, so you should wrap it inside a function and call it on Click for example. Also, I would recommend using scrollIntoView() as this as been standardized (see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

    So it would look something like this:

    $( "#scrollButton" ).click(function() {
   document.getElementById('row_15').scrollIntoView({
   behavior: 'smooth'
   });
});

    I’ve also updated your jsfiddle: https://jsfiddle.net/eb97tog1/7/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search