Scrolling to element and highlight

Question

I need to highlight and scroll to the element. The below code works for highlight but I am unable to code the scroll. How do I make the scroll to the highlighted element possible?

<!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);
         }
         $(document).ready(function () {
          $('select').select2();
         });
      </script>
   </body>
</html>

You should've shared what you've tried and we'd help you debug, but your question as is is a duplicate. — Islam Elshobokshy, Oct 05 '20 at 07:05
Ok When used this code in an apps script HTML dialog it wont work — Code Guy, Oct 05 '20 at 07:06

score 1 · Accepted Answer · answered Oct 05 '20 at 07:04

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>

This is a clear duplicate, no need to answer... – Islam Elshobokshy Oct 05 '20 at 07:04 — Islam Elshobokshy, Oct 05 '20 at 07:04

Scrolling to element and highlight

1 Answers1