Как переместить прокрутку по нажатию кнопки? - PullRequest
Новая
       1

Как переместить прокрутку по нажатию кнопки?

0 голосов
/ 12 января 2020

Я использовал 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];
            }
        }

enter image description here

Ответы [ 2 ]

1 голос
/ 12 января 2020 
<!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>
0 голосов
/ 12 января 2020

Почему вы не можете использовать html якоря? вам просто нужно присвоить этому элементу цифру c и вызвать его, когда вам нужно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...