javascript - 滚动到顶部和底部的 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>

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

做类似的事情: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'))