Faire défiler le contenu de la page en appuyant sur les touches fléchées

Question

Bonjour Je voudrais savoir comment faire défiler ma page en appuyant sur les touches fléchées. Comme cette page: http://spacexstats.xyz. Le script Java et jQuery sont acceptés.

Merci, Ivan.

Answer 1

Chaque page peut être défilée avec les flèches haut/bas par défaut.

Si vous parlez de défilement personnalisé lisse - la page que vous demander utilise Angular scroll plugin

Il y a beaucoup libs et plugins qui peuvent aider à atteindre une expérience utilisateur similaire, envisagez d'utiliser Google pour défilement lisse [sur les touches fléchées]

bibliothèques Exemple:

• 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

Ceci est une AngularJS demande. Ils utilisent bibliothèque à défilement angulaire (https://github.com/oblador/angular-scroll) pour faire défiler en douceur les éléments de la page. Voici une petite application angulaire qui montre un défilement en douceur vers plusieurs éléments de la 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>