HTML-Liste Schritt scrollen nach oben und unten

Question

Ich habe eine vertikale Liste in meinem HTML. Es gibt einen oberen Pfeil und einen unteren Pfeil neben dieser Liste. Wenn ich auf den oberen Pfeil klicke, möchte ich, dass diese Liste Schritt für Schritt nach oben und umgekehrt für den unteren Pfeil geht. Das Folgende ist mein HTML- und Angular-Code.

<div class="verticalCarousel"> 
<a ng-click="scrolltoBottom();" class="scroll-to-bottom">BOTTOM</a> 
<ul class="nav nav-tabs verticalCarouselGroup" role="tablist" id="messagestab" > 
     <li role="presentation"> 
      TEST 
     </li> 
     <li role="presentation"> 
      TEST 
     </li> 
     <li role="presentation"> 
      TEST 
     </li> 
     <li role="presentation"> 
      TEST 
     </li> 

     <li role="presentation"> 
      TEST 
     </li> 

     <li role="presentation"> 
      TEST 
     </li> 
    </ul> 

    <a ng-click="scrolltoTop();" class="scroll-to-top">TOP</a> 
</div> 

Hier ist der Winkelcode.

var i = 1; 
    $scope.scrolltoBottom = function(){ 
     var list = $(".verticalCarouselGroup"); 
     var container = $(".verticalCarousel"); 
     console.log(list.height()-list.offset().top+"= BOTTOM OF CARO") 
     console.log(container.height()-container.offset().top+"= BOTTOM OF container") 

     i = i+50; 
     list.css({ 
      'position': 'relative', 
      'top':i , 
     }); 
    }; 

    $scope.scrolltoTop = function(){ 
     var list = $(".verticalCarouselGroup"); 
     var container = $(".verticalCarousel"); 
     console.log(list.height()-list.offset().top+"= BOTTOM OF CARO") 
     console.log(container.height()-container.offset().top+"= BOTTOM OF container") 

     i = i-50; 
     list.css({ 
      'position': 'relative', 
      'top':i , 
     });   

    }; 

fügte ich ein jsfiddle

https://jsfiddle.net/arunkumarthekkoot/863z3kky/2/

Answer 1

Sie

so etwas wie: Fiddle

angular.module("testApp", []).controller('ScrollCtrl', ['$scope', function($scope) { 
    $scope.scrolltoBottom = function() { 
    var list = $(".verticalCarouselGroup"); 
    list.animate({ "marginTop": "+=50px" }, "slow"); 
    }; 

    $scope.scrolltoTop = function() { 
    var list = $(".verticalCarouselGroup"); 
    list.animate({ "marginTop": "-=50px" }, "slow"); 
    }; 
}]); 

zu stoppen i t vom Scrollen können Sie Prüfungen für den unteren und oberen Rand hinzufügen.

Hint: Vergleichen unten oben mit MarginTop: (list.css('marginTop'))

Answer 2

Wenn ich richtig verstehe, sind Sie für scroll down Schritte von Schritten auf li Elemente nur auf einen Klick auf den Pfeil suchen?

Wenn das es ist: Sie könnten vielleicht glatte Scroll-Plugin wie ui.kit verwenden und ein Click-Ereignis in setTimeout oder setIntervall auslösen, die auf jedes Element nach unten scrollen nach einem Array wie

myListEl = ['#first', '#second', etc...]; 

http://getuikit.com/docs/smooth-scroll.html