Scroll to top an image in sidebar angularjs directive

Question

I need to scroll the active image to top using angularjs directive. When i tried to process with element[0].offset() its throwing error.

Explanation :

Here i am hardcoding the active element to 5 in the line. No need to code for that as i could set that active element dynamic based on the url. All i need is image 5 should scroll to top on the side bar as it is the active element

myApp.controller('sidebarController', function($scope){
$scope.images=[];
for(var i = 0; i< 10; i++){
    temp = {url:'http://lorempixel.com/400/200',active:false}
    $scope.images.push(temp)
}

$scope.images[5].active=true;  // hardcoding the 5th element to be active.

})

Here is my directive code.

myApp.directive('scrollToTop',function($timeout){

return {
    restrict:'A',
    link:function(scope, element, attributes){
    if(attributes.active == true || attributes.active =='true'){
    $timeout(function () {
            console.log(element)
        //angular.element(element)[0].scrollTop =  element[0].offset().top;// commented it as it was throwing error.
      });
    }
  }  
}

})

Here is my jsfiddle

score 0 · Answer 1 · answered Jun 08 '16 at 01:45

After 2 days of coding, went with anchorScroll. Hope this should be the only solution. Confused what scrollTop then for?

Here is my updated Code

myApp.directive('scrollToTop',function($timeout, $anchorScroll, $location){

return {
    restrict:'A',
    link:function(scope, element, attributes){
            if(JSON.parse(attributes.scrollToTop.toLowerCase())){
        $location.hash(attributes.id);
        $anchorScroll();
        }
  }  
}

})

Scroll to top an image in sidebar angularjs directive

1 Answers1