myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm) {
$elm.on('click', function() {
$("body").animate({scrollTop: $elm.offset().top}, "slow");
});
}
}
});
演示:http ://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview
要获取有关创建指令的帮助,请查看视频,网址为http://egghead.io,从#10“第一个指令”开始。
:要使其滚动到href指定的特定元素,只需选中attrs.href
。
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "slow");
});
}
}
});
然后,您可以像这样使用它:<div scroll-on-click></div>
滚动到单击的元素。或<a scroll-on-click href="#element-id"></div>
滚动到带有ID的元素。