AngularJS动画滚动至最新版本

许多网站都有长页面的功能，比如当用户向下滚动时，右侧会出现一个箭头符号，当用户单击该箭头时，页面会滚动到顶部。我尝试对自定义指令执行同样的操作。我的代码正在运行，但有一个问题是，当页面以编程方式向上滚动时，某个时间箭头符号变得可见和不可见，这看起来很糟糕。所以，我的请求是请一些人查看我在JSFIDLE中的代码，并建议我哪里出了问题，导致箭头符号变得可见和不可见

这是我的名片

我混合了位jquery，因为我不知道如何纯粹通过java脚本实现它，jquery非常容易通过动画功能获得平滑效果。

请查看我的代码，并给出您的建议，说明为什么在向上滚动页面的过程中，箭头符号会变得可见和不可见

看到我的代码了吗

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.items=[]；
对于（变量i=0；i 300）{
$（'.scrollup'）.fadeIn（）；
}否则{
$（'.scrollup'）.fadeOut（）；
}
});   
$elm.on（'click'，function（））{
//警惕（“你好”）；
$（“html，body”）.animate（{scrollTop:0}，“slow”）；
});
}
}
});

---

谢谢

这是因为您使用的是

编辑：

没有jQuery，您可以执行以下操作：

Fiddle:
一个不使用jquery的小问题，我如何才能达到同样的效果。将发布任何不使用jquery的代码。谢谢你的大力帮助。
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  for (var i=0; i<100; i++) { $scope.items.push(i); }
});

app.directive('scrollOnClick', function() {
  return {
    restrict: 'EA',
    template:'<a title="Click here to go top" class="scrollup" href="#" >Scroll</a>',
    link: function(scope, $elm) {
$(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
    });   
      $elm.on('click', function() {
        //alert('hello');
        $("html,body").animate({scrollTop: 0}, "slow");
      });
    }
  }
});