AngularJS / JQuery:从当前位置滚动到元素
AngularJS / JQuery: scroll from current location to element
这是我当前的指令,我发现它是对以下问题的第二个答案 - ScrollTo function in AngularJS:
.directive('scrollToItem', function($timeout) {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function(scope, $elm,attr) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}})
上面的代码可以这样使用:
<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">
问题是这会导致页面快速向上滚动,然后从顶部开始动画。有推荐的方法让我从当前位置滚动到所需位置吗?
一个解决方案是改变
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
到
$elm.on('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
我在这里找到的:jQuery flicker when using animate-scrollTo
我等着看有没有更好的解决办法。如果没有,我将把这个标记为正确的解决方案。
这是我当前的指令,我发现它是对以下问题的第二个答案 - ScrollTo function in AngularJS:
.directive('scrollToItem', function($timeout) {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function(scope, $elm,attr) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}})
上面的代码可以这样使用:
<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">
问题是这会导致页面快速向上滚动,然后从顶部开始动画。有推荐的方法让我从当前位置滚动到所需位置吗?
一个解决方案是改变
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
到
$elm.on('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
我在这里找到的:jQuery flicker when using animate-scrollTo
我等着看有没有更好的解决办法。如果没有,我将把这个标记为正确的解决方案。