我是角色新手但仍然为动画滚动到顶部效果写了一个示例指令。首先看看我的代码和jsfiddle在行动https://jsfiddle.net/tridip/hzgjcojg/
<body ng-app="plunker" ng-controller="MainCtrl">
<ul>
<li ng-repeat="i in items" style="width: 100%; line-height: 30px;">
{{i}} click me to scroll to me!
</li>
</ul>
<scroll-on-click></scroll-on-click>
</body>
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="#" style="display: inline;">Scroll</a>',
link: function(scope, $elm) {
$elm.on('click', function() {
$("html,body").animate({scrollTop: 0}, "slow");
});
}
}
});
访问此网址https://webdesignerhut.com/animated-scroll-to-top-jquery/，看看我想用指令实现哪种输出。在该网站中，当用户向下滚动时，箭头将会出现，当用户点击该箭头时，会顺利滚动向上发生。
1）在我的代码中箭头即将到来但是当点击然后平滑滚动没有发生可能是我没有包括jquery依赖文件。没有jquery如何用普通的javascript进行平滑滚动？
2）我想在用户向下滚动并且非常接近页面结束时显示箭头图像。如何在角度指令中实现它。基本上我必须检查用户是否接近指令的页面结束，如果是，那么我必须在我的指令div中显示箭头或附加箭头。
所以请看我的两点，帮助我实现目标。感谢