javascript - AngularJS 中的 ScrollTo 函数

Question

我正在尝试让快速导航正常工作。它漂浮在一边。当他们单击链接时，会将他们带到页面上的该 ID。我正在关注这个 guide from Treehouse .这就是我要滚动的内容:

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

我最初将它放在 </body> 之前.但我似乎遇到了一个竞争条件，它在 quickNav 编译之前触发(它上面有一个 ng-hide，不确定是否是它的原因 - 但它在 DOM 中)。

如果我在控制台中运行该代码块，则滚动会按预期工作。

我认为将它移到 Controller 中会更有效 - 或者更可能是在指令中。但我没有运气实现这一目标。 如何让这段代码与 AngularJS 一起工作？

Answer 1

这是一个简单的指令，它会在点击时滚动到一个元素:

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 的元素。