我无法通过我的简单组件进行动画滚动，我想了解为什么!
基本上这是我的简单代码:
(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带有一个工作演示。
知道如何让它发挥作用吗？我尝试了多种方法，但我想将其保留在指令内。
最佳答案
这是一个有效的解决方案，(您遇到了一些实现错误):
(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>关于javascript - 从指令中的链接滚动到屏幕顶部不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47474242/