CODEWITHSUNDEEP
javascriptjqueryangularjs
Micky
Micky

Reputation: 737

Scroll to Top of the screen not working from Link in Directive

I can't make this scrolling with animation working from my simple component, and I would like to understand why!

Basically this is my simple code:

(function(angular) {
  var app = angular.module('pi.core');
  app.directive('piGoUp', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        classes: '@',
        image: '@'
      },
      link: function(scope, element, attrs) {
        if (!scope.image) scope.image = 'go-up.svg';

        $(document).ready(function() {
          $(window).scroll(function() {
            if ($(this).scrollTop() > 250) {
              $('#scrollup').fadeIn(300);
            } else {
              $('#scrollup').fadeOut(300);
            }
          });

          $('.pi-go-up').click(function() {
            console.log('ciao');
            $('html, body').animate({ scrollTop: 0 }, 1000);
            return false;
          });
        });
      },
      template:
        '<div class="pi-go-up {{classes}}"><div class="pi-go-up-text" ng-transclude></div><div><img src="{{image}}"/></div></div>'
    };
  });
})(angular);

With the CSS, in case it's relevant for the missing behaviour:

.pi-go-up {
  display: inline-flex;
  float: right;
  vertical-align: middle;
  margin-top: 20px;
  margin-bottom: 20px;
}
.pi-go-up-text {
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: 0.1px;
  color: #575757;
  margin-top: auto;
  margin-bottom: auto;
}
.pi-go-up img {
  width: auto;
  height: 36px;
  margin-left: 11px;
}

I am following this guide with a working demo.

Any idea about how I can make it working? I tried in several ways, but I would like to keep it inside the directive.

Upvotes: 0

Views: 52

Answers (1)

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

Here is a working Solution, (You had some implementation error):

(function(angular) {
  var app = angular.module('app', []);
  app.controller('DemoController', function($scope) {
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
  });
  app.directive('piGoUp', function() {
    return {
      restrict: 'AE',
      replace: true,
      transclude: true,
      scope: {
        classes: '@',
        image: '@'
      },
      link: function(scope, element, attrs) {
        if (!scope.image) scope.image = 'go-up.svg';

        $(document).ready(function() {
          $(window).scroll(function() {
            if ($(this).scrollTop() > 250) {
              $('#scrollup').fadeIn(300);
            } else {
              $('#scrollup').fadeOut(300);
            }
          });

          $('.pi-go-up-text').click(function() {
            
            $('html, body').animate({
              scrollTop: 0
            }, 1000);
            return false;
          });
        });
      },
      template: '<div class="{{classes}}"><button class="pi-go-up-text" >GoUp</button>'
    };
  });
})(angular);
.pi-go-up-text {
  position: fixed;
  bottom: 0px;
}
<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="DemoController" style="height:2000px;overflow-y:scroll;">
    <span pi-go-up />
  </div>
</body>

</html>

Upvotes: 1

Related Questions