Question

许多网站都有长页面功能，例如当用户向下滚动时，箭头符号出现在右侧，当用户点击该箭头时，页面滚动到顶部。我尝试使用自定义指令执行相同操作。我的代码正在运行，但有一个问题是，当以编程方式页面向上滚动时，某个时间箭头符号变得可见且不可见，这看起来很糟糕。所以我的请求请一些人在jsfiddle看到我的代码，并告诉我那里有什么问题导致箭头标志变得可见和不可见。

这是我的jsfiddle https://jsfiddle.net/tridip/hzgjcojg/2/

我有混合位jquery，因为我不知道如何通过java脚本纯粹实现它，而jquery很容易通过 animate函数获得平滑效果。

请查看我的代码并提供您的建议，为什么在页面向上滚动期间，某些时间箭头符号变得可见且不可见。

查看我的代码

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");
      });
    }
  }
});

感谢

Answer 1

这是因为您在指令中使用<a>标记href="#"作为模板。如果您在0函数中记录$(this).scrollTop()导致淡入淡出动画开始淡出并且再次淡入淡出后，它会将窗口滚动位置显示为$(window).scroll。使其工作的一种方法是用div或其他东西替换模板或从模板中删除href。

小提琴：https://jsfiddle.net/tmdy51rh/3/

修改

如果没有jQuery，你可以这样做：

小提琴：https://jsfiddle.net/tmdy51rh/5/

AngularJS动画滚动到顶部问题

查看我的代码

1 个答案: