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

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 >
<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

CodePudding user response：

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/

CodePudding user response：

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()
});

CodePudding user response：

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/