How to Scroll to an Element Using JavaScript

How do I scroll to an element using JavaScript?

You can use an anchor to "focus" the div. I.e:

<div id="myDiv"></div>

and then use the following javascript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

How to scroll to an element using Javascript?

One way would be to change the waiting time to zero milliseconds once the DOM is fully loaded.

var mSeconds = 500;

window.addEventListener('DOMContentLoaded', function(event) {
  mSeconds = 0;
});

const scroll = (el) => {
  setTimeout(function () { 
    el.scrollIntoView( {behavior : 'smooth', block : 'end'});
  }, mSeconds);
  
}

How to scroll to an element?

<div id="componentToScrollTo"><div>

<a href='#componentToScrollTo'>click me to scroll to this</a>

This is all you need.

How to scroll to an element inside a div?

You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).

Now we tell the div to scroll to that position using scrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

If you're using the prototype JS framework, you'd do the same thing like this:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).

Scroll to an element with jQuery

Assuming you have a button with the id button, try this example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

How to scroll to an element WITHIN a div, without scrolling entire page (no JQuery)?

If you don't mind setting an id to the specific h3:

<div>
  <!-- The content of the div -->

  <h3 id="foo">
    Foo
  </h3>

  <h3 id="bar">
    Bar
  </h3>

  <!-- ... -->
</div>

you can then tell the browser to navigate to the h3 element using a link pointing to the id using the hash:

<a href="#foo">
  <button>
    Go to Foo
  </button>
</a>

else, you can use the Javascript .scrollIntoView() function while targeting the correct h3 element:

// Consider the h3 element is referenced by the 'h3' variable

h3.scrollIntoView();

as stated on MDN Web Docs

See example:

// Wait for window to load before adding listeners
window.addEventListener('load', function() {
  // The button that needs to trigger the scrolling event
  const button = document.querySelector('button.clickable');
  
  // The h3 element to scroll to
  const h3 = document.querySelector('h3');
  
  // Add the click listener
  button.addEventListener('click', function(event) {
    h3.scrollIntoView();
  });
});

h3 {
  /* Make the h3 elements really distanced from other elements to test the scrolling  */
  margin: 500px auto;
}

<div>
  <a href="#foo">
    <button>
      Goto <code>foo</code> using <code>id</code>
    </button>
  </a>
  
  <button class="clickable">
    Goto <code>foo</code> using <code>scrollIntoView</code>
  </button>
  
  <h3 id="foo">
    Foo
  </h3>
</div>

Javascript scroll to specific element by ID

You don't have to compute any value to do what you want, and don't have to use JavaScript at all. At least, as you don't want a smooth scrolling.

You can easily scroll to any element with it id setting the href attribute :

<a href="#my_id" id="my_link">Click me to scroll down</a>

...

<section id="my_id">...</section>

Ok, according to your comment, there is a conflict with the angular's Router when doing this, so with a little bit of JavaScript you can solve the problem :

document.getElementById("my_link").addEventListener("click",(e)=>{
    e.preventDefault();
    document.querySelector(e.currentTarget.href).scrollIntoView();
});