Question

我无法通过简单的组件使用动画进行滚动，我想了解原因！

基本上这是我的简单代码：

(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);

使用CSS，以防它与缺失的行为相关：

.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;
}

我正在关注此guide并进行演示。

有关如何使其正常工作的任何想法？我试过几种方法，但我想把它放在指令里面。

Answer 1

这是一个有效的解决方案，（你有一些实现错误）：

(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>

滚动到屏幕顶部无法使用Link in Directive

1 个答案: