HTML列表步驟滾動到頂部和底部

我在我的HTML中有一個垂直列表。該列表附近有一個頂部箭頭和底部箭頭。當我點擊頂部箭頭時，我希望這個列表逐步上升，而底部箭頭則相反。以下是我的html和Angular代碼。HTML列表步驟滾動到頂部和底部

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

這裏是Angular的代碼。

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

    };

我加了的jsfiddle

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

來源

2016-06-16 user2827944

你是什麼意思：名單上一步一步？你可以準備一個jsfiddle嗎？ –

@Himanshu Tyagi請參閱https://jsfiddle.net/arunkumarthekkoot/863z3kky/2/ – user2827944

你想達到什麼目的？ –

數組觸發click事件

這樣做：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')）

來源

2016-06-16 13:23:58

是的，這是一個不錯的主意，但是與底部頂端的意思相比？ – user2827944

我的意思是當你到達頂部時停止滾動，當你到達底部時滾動。因此，當按下上或下時，抓住頂部和底部值並將其與當前狀態進行比較。 –

檢查工作jsfiddle ..你只需要添加停止代碼。 –

如果我理解正確的，你要找的滾動只是點擊箭頭由li元素步下臺階？

如果就是這樣：也許你可以使用平滑滾動插件像ui.kit和setTimeout或setIntervall，其中每個元素上向下滾動以下類似

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

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

來源

2016-06-16 12:43:54 Kiho

HTML列表步驟滾動到頂部和底部

回答

相關問題