AngularJS中的ScrollTo函数

一尘不染

AngularJS中的ScrollTo函数

angularjs

我正在尝试快速导航以使其正常工作。它漂浮在侧面。当他们单击链接时，会将他们带到页面上的该ID。我正在遵循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内）。

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

我认为将其移入控制器会更有效-或更可能在指令中。但是我没有那么幸运。 如何获得此代码块以与AngularJS一起使用？

阅读 364

2020-07-04

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

2020-07-04