My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Below is the HTML code along with the Angular script for reference.
<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>
Below is the Angular code snippet that achieves the desired functionality.
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 ,
});
};
I have also included a link to a jsfiddle demonstration.