scrollTo in AngularJS

Question

到目前为止，我一直在使用jQuery作为我的单页“滚动到div”应用程序，但是自从我制作了一个有角度的应用程序(只是为了学习目的)，我尝试以角度来做所有事情，而不是回到好的ol‘jQuery上。

我试着做一个滚动到div-在同一页-菜单，但我真的不确定如何做到这一角度。

目前，我正在使用这个片段来做我想做的事情：

JS

app.directive('scrollOnClick', function() {
      return {
        restrict: 'A',
        link: function(scope, $elm, attrs) {
          $elm.click(function() {
            var linkHref = attrs.href;
            angular.element('html,body').animate({
              // select the element the href points to
              scrollTop: angular.element(linkHref).offset().top - 60
            }, 'slow');
          });
        }
      }
    });

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a ng-href="/" role="button" class="navbar-brand">angularApp</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="##one">One</a></li>
        <li><a href="##two">Two</a></li>
        <li><a href="##three">Three</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="page-wrap">
  <div id="one">...</div>
  <div id="two">...</div>
  <div id="three">...</div>
</div>

但效果并不完美。

我需要它滚动一个60 my的保证金，因为你可以在代码中看到，因为我的固定导航条。我还希望它导航慢一些，并且有一个非常像/two而不是/#two的url。这是如何实现的？

Answer 1

最后我使用了角滚动体，我认为这是非常好的。使用起来很简单。在用bower安装它之后，我所要做的就是注入模块，然后简单地将它添加到我的中(仅仅是github的一个例子)：

<a href="" scroll-to="#element" offset="0" container="html, body">Go to element</a>

<div id="element">
  You will scroll to me
</div>

Answer 2

如果已经加载了jQuery，则可以使用angular.element作为$的别名。这通常是“适当”的方式，以角度来做。如果不先加载jQuery，angular.element将使用jQLite，这取决于可用的选择器。既然您已经在使用jQuery，让我们假设您已经在角之前加载了它。

假设您的jQuery示例按照您喜欢的方式工作，您可以使用相同的选择器，以$elm代替target，减去60 to，并将动画定时器设置为1000，就像在jQuery示例中所做的那样。

试着做这样的事情：

app.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.click(function() {
        // same as your jQuery example
        angular.element('html,body').animate({
          scrollTop: $elm.offset().top - 60
        }, 1000);
      });
    }
  }
});

-编辑--

等等，我知道你想做什么.

您需要从元素中获取href属性。link函数可以接受第三个参数，即附加到元素的属性。然后，不要将scrollTop设置为单击的链接的偏移量，而是将其设置为href中元素的偏移量，使用angular.element进行选择。如下所示：

app.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      $elm.click(function() {
        var linkHref = attrs.href;
        angular.element('html,body').animate({
          // select the element the href points to
          scrollTop: angular.element(linkHref).offset().top - 60
        }, 1000);
      });
    }
  }
});