Question

您好我想知道如何在按下箭头键时滚动页面。喜欢这个页面：http://spacexstats.xyz。接受Java脚本和jQuery。

谢谢，伊万。

Answer 1

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

如果您正在谈论流畅的自定义滚动 - 您询问的页面正在使用Angular scroll plugin

有许多图书馆和插件可以帮助实现类似的用户体验，请考虑使用谷歌进行平滑滚动[在箭头键上]

示例库：

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>

按箭头键时滚动页面内容

2 个答案: