Scroll to an element in a div

Question

I would like my

div="#course_navigation"

in my sidebar with this css:

.sidebar #course_navigation {
    max-height: 700px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

to scroll to this class on page load:

.learndash-current-menu-item 

I try this, but nothing happens:

$('#course_navigation').scrollTo('.learndash-current-menu-item');

I have tried many other codes, with no success. Don't know the problem is.

The structure looks like this:

Maybe I was not specific enough, so I repeat:

#course_navigation

is scrollable.

I need #course_navigation scrolled until .learndash-current-menu-item can be seen at the top or center of #course_navigation on page load.

I have this at field of Theme Space before /head:

<script src="code.jquery.com/jquery-1.10.2.js"></script>;

I put the script to Space before /body like this:

<script>$('#course_navigation').scrollTo('.learndash-current‌​-menu-item');</scrip‌​t>

No succes yet, nothing happens, none of the solution works...

Please help me out here with JS or jquery. The best should be scroll the element to the center of the div.

Thank you in advance!

András

Answer 1

Try

$(document).on('click', '#course_navigation', function(){
    $('html, body').animate({
        scrollTop: $(".learndash-current-menu-item").offset().top
    }, 1000);
});

This will scroll to your element with 1 second duration.

Here's the description of the code:

1. First, by binding the code to the document, instead simply to the element, we make sure that the code still works after you replaced the original element (with one with the same id, of course). This is called event delegation, and while it's not necessary for your case, it's always nice to use.

2. Then we create a function that triggers when you click on your element (this was the most important part you missed). Clicking on div#course_navigation will execute the lines you find in the function() tag.

3. The function uses jQuery animate to scroll to the top position of the element you want to. It takes two parameters: the first one if what you want to do (go to the top position of the desired element); the second one tells you hw long the animation should run (in milliseconds, so with 1000, it will take one second to the animation to finish and for the page to reach it's new position).

Answer 2

try this code

$('html, body').animate({
  'scrollTop': $("#course_navigation").position().top
});

.sidebar #course_navigation {
  max-height: 700px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

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

<div id="#course_navigation1">
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
</div>
<div id="course_navigation">test</div>

Answer 3

This works for me.

$(window).scrollTop($('.learndash-current-menu-item').offset().top);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="course_navigation">
Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/>
<div class="learndash-current-menu-item">
   <h1>Scrool to me</h1>
</div>
Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>
</div>

</div>