滚动到元素并突出显示

Question

我需要突出显示并滚动到该元素。下面的代码适用于突出显示，但我无法对滚动进行编码。如何使滚动到突出显示的元素成为可能？

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

Answer 1

您可以使用 offset() method. Then use animate 获取滚动距离，以便平滑滚动到元素。

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

滚动到元素并突出显示

Scrolling to element and highlight

html

javascript

jquery

jquery-ui