Scroll page content when pressing arrow keys

Question

Hi I would like to know how I can make my page scroll when arrow keys are pressed. Like this page: http://spacexstats.xyz. Java script and jQuery are accepted.

Thanks, Ivan.

Answer 1

Each and every page will could be scrolled with arrow up/down keys by default.

If you are talking about smooth custom scroll - the page you asking is using Angular scroll plugin

There are many libs and plugins which can help achieve similar user experience, consider using google for smooth scroll [on arrow keys]

Example libraries:

• 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

This is an angularJS application. They are using angular-scroll (https://github.com/oblador/angular-scroll) library to smoothly scroll to elements on the page. Here is a small angular application that demonstrates smooth scrolling to multiple elements on the page.

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