如何通过按钮单击移动滚动？答案

【问题标题】：How to move the scroll by button click?如何通过按钮单击移动滚动？
【发布时间】：2020-04-29 06:33:06
【问题描述】：

我使用了 ng-scrollbars 和 jquery.mCustomScrollbar，我想在最后一个元素到达时通过按钮移动滚动条。

我有点用键盘箭头键移动，但只有当我到达最后一个元素时，反之亦然。

我使用这些代码在行之间移动。

// ArrowDown
        if (event.keyCode === 40) {
            self.Func.stopPropagationPreventDefault(event);
            self.Data.keyDownIndex++;
            if (self.Data.keyDownIndex < array.length)
                self.Data.focusedObj = array[self.Data.keyDownIndex];
            else {
                self.Data.keyDownIndex = 0;
                self.Data.focusedObj = array[self.Data.keyDownIndex];
            }
        }
        // ArrowUp
        else if (event.keyCode === 38) {
            self.Func.stopPropagationPreventDefault(event);
            self.Data.keyDownIndex--;
            if (self.Data.keyDownIndex >= 0)
                self.Data.focusedObj = array[self.Data.keyDownIndex];
            else {
                self.Data.keyDownIndex = array.length - 1;
                self.Data.focusedObj = array[self.Data.keyDownIndex];
            }
        }

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hey</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      *{list-style: none; padding: 0; margin: 0;}
      .links{text-align: center; margin: 20px}
      .list{position: absolute; width: 100%;}
      .list_element{text-align: center; padding: 10px; background: #eee; border: 2px solid #fff;}
    </style>
    <script>
    $(document).ready(function(){
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {
      // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();
          // Store hash
          var hash = this.hash;
          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: ($(hash).offset().top) - 200,
          }, 800, function(){
            // Add hash (#) to URL when done scrolling (default click behavior)
            $(hash).css("background","red");
            window.location.hash = hash;
          });
        } // End if
      });
    });
    </script>
  </head>
  <body>
    <div class="links">
      <a href="#15">go to element 15</a>
    </div>
    <ul class="list">
      <li class="list_element" id="1">1</li>
      <li class="list_element" id="2">2</li>
      <li class="list_element" id="3">3</li>
      <li class="list_element" id="4">4</li>
      <li class="list_element" id="5">5</li>
      <li class="list_element" id="6">6</li>
      <li class="list_element" id="7">7</li>
      <li class="list_element" id="8">8</li>
      <li class="list_element" id="9">9</li>
      <li class="list_element" id="10">10</li>
      <li class="list_element" id="11">11</li>
      <li class="list_element" id="12">12</li>
      <li class="list_element" id="13">13</li>
      <li class="list_element" id="14">14</li>
      <li class="list_element" id="15">15</li>
      <li class="list_element" id="16">16</li>
      <li class="list_element" id="17">17</li>
      <li class="list_element" id="18">18</li>
      <li class="list_element" id="19">19</li>
      <li class="list_element" id="20">20</li>
      <li class="list_element" id="21">21</li>
      <li class="list_element" id="22">22</li>
      <li class="list_element" id="23">23</li>
      <li class="list_element" id="24">24</li>
      <li class="list_element" id="25">25</li>
      <li class="list_element" id="26">26</li>
      <li class="list_element" id="27">27</li>
      <li class="list_element" id="28">28</li>
      <li class="list_element" id="29">29</li>
      <li class="list_element" id="30">30</li>
    </ul>
  </body>
</html>

【讨论】：

【解决方案2】：

为什么不能使用 html 锚点？您只需为该元素提供一个数字 id 并在需要时调用它

【讨论】：

我用箭头键在行之间移动。我希望滚动直到突出显示的部分向上或向下移动，但是当突出显示的部分完成并想要转到未显示的字段时，滚动将与显示字段一样低或一样高。
首先获取该元素的坐标，然后添加一些
你能举个例子吗？
我使用了我在w3schools.com/howto/howto_css_smooth_scroll.asp#section2 找到的一个小功能并对其进行了修改