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>

这是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/

Answer 1

如果我理解正确的话，那你只是在点击箭头时，正在寻找逐步向下滚动的元素？

如果是这样的话：您可以使用像ui.kit这样的平滑滚动插件，并触发setTimeout或setIntervall中的点击事件，向下滚动数组后的每个元素，如

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

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

Answer 2

执行以下操作：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");
  };
}]);

要停止滚动，可以添加底部和顶部的检查。

提示：将bottom top与marginTop进行比较：（list.css('marginTop')）

HTML列表步骤滚动到顶部和底部

2 个答案: