按下箭头键时滚动页面内容

Question

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

谢谢，伊凡

Answer 1

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

如果您正在谈论平滑的自定义滚动-您询问的页面正在使用Angular滚动插件

有许多库和插件可以帮助实现类似的用户体验，请考虑使用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>