HTMLリストステップの上下スクロール

Question

私は自分のHTMLに縦リストを持っています。そのリストの近くには、上矢印と下矢印があります。上の矢印をクリックすると、このリストがステップごとに上に移動し、下の矢印の反対に移動します。以下は私のhtmlとAngularコードです。

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

ここには角度コードがあります。

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 , 
     });   

    }; 

私は右理解していれば、あなただけの矢印をクリック上のli要素上の手順でスクロールダウンの手順を探している？jsfiddle

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

Answer 1

のような配列以下 setTimeoutまたはすべての要素を下にスクロール setIntervallにクリックイベントをトリガすることができ私を停止するには 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"); 
    }; 
}]); 

：

のような何かを実行します。スクロールすることで、下と上のチェックを追加できます。

ヒント：marginTopと上下の比較：（list.css('marginTop')）

Answer 2

を追加しましたかそれはそれをなら

： あなたは多分ui.kitのようなスムーズなスクロールプラグインを使用して

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

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