How to Scroll to an Element

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?

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

Scrolling to element and highlight

You can get the distance to scroll with the offset() method. Then use animate to have a smooth scroll to the element.

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <body>
      <button onclick="highlightSelect2('#sel3')" >Highlight sel3</button>
      <button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
      <button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
      <br/>
      <br/>
      <select style="width:50%" id="sel1">
         <option>Example0 test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel2">
         <option>Example1 test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel3">
         <option>Example3 test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel4">
         <option>Alpha test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel5">
         <option>Alpha test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel6">
         <option>Alpha test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <select style="width:50%" id="sel7">
         <option>Alpha test</option>
      </select>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <button onclick="highlightSelect2('#sel3')" >Highlight sel3</button>
      <button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
      <button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
      <script>
         function highlightSelect2(selector) {
            $(selector)
                .next(".select2-container")
                .find(".select2-selection")
                .effect("highlight", {
                    color: "#f88"
                }, 10000);
            
            $('html, body').animate({
                scrollTop: $(selector).offset().top
            }, 1000);
         }
         $(document).ready(function () {
          $('select').select2();
         });
      </script>
   </body>
</html>

Scroll to a specific Element Using html

Yes you use this

<a href="#google"></a>

<div id="google"></div>

But this does not create a smooth scroll just so you know.

You can also add in your CSS

html {
  scroll-behavior: smooth;
}