按箭头键时滚动页面内容

Question

嗨，我想知道如何使我的网页滚动时，箭头键是按下。就像这个页面：http://spacexstats.xyz。Java脚本和jQuery被接受。

谢了伊凡。

Answer 1

默认情况下，每个页面都可以使用上下键滚动。

如果您说的是光滑的自定义滚动--您询问的页面使用的是角涡旋插件。

有许多lib和插件可以帮助实现类似的用户体验，请考虑使用google实现箭头键上的平滑滚动。

示例库：

• http://www.jqueryscript.net/other/jQuery-Plugin-For-Scrolling-Content-with-Arrow-Keys-keyscroll.html
• https://github.com/eustasy/Smooth-Scroll-ALL-the-Things

Answer 2

这是一个angularJS应用程序。他们使用angular-scroll (https://github.com/oblador/angular-scroll)库顺利滚动到页面上的元素。这里是一个小角度的应用程序，它演示了平滑地滚动到页面上的多个元素。

​

(function() {
  var app = angular.module("soDemo", ['duScroll']);
  app.controller("soDemoController", SoDemoController);

  SoDemoController.$inject = ['$scope', '$document'];

  function SoDemoController($scope, $document) {
    var vm = {
      getContent: getContent,
      scrollTo: scrollTo
    };

    $scope.vm = vm;
    return;

    ////////// IMPLEMENATION ////////
    function getContent(size) {
      return 'blah '.repeat(size);
    }

    function scrollTo(selector) {
      // Note: normally we don't want to interact with the DOM in a controller. A directive is the proper way to do this but for this example we'll let it slide.
      var target = $(selector)[0];
      $document.scrollToElementAnimated(target, 0, 1000);
    }
  }
})();

a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-scroll/1.0.2/angular-scroll.js"></script>

<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
  <h1 id="title1">Title 1</h1>
  <a ng-click="vm.scrollTo('#title2')">Go to Title 2</a>
  <p>{{vm.getContent(1000)}}</p>

  <h1 id="title2">Title 2</h1>
  <a ng-click="vm.scrollTo('#title3')">Go to Title 3</a>
  <p>{{vm.getContent(1000)}}</p>

  <h1 id="title3">Title 3</h1>
  <p>{{vm.getContent(100)}}</p>
  <a ng-click="vm.scrollTo('.sample')">Go to Top</a>
</div>

​