Question

到目前为止，我一直在为单页“滚动到div”应用程序使用jQuery，但是因为在制作一个Angular应用程序（仅用于学习目的），我尝试用角度做所有事情，而不是回到好的ol' jQuery的。

我试图在同一页菜单上滚动到div，但我不确定如何在Angular tho中执行此操作。

目前我正在使用此代码段来执行我想要的操作：

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');
          });
        }
      }
    });

HTML

<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>

但它并不完美。

由于我的固定导航栏，我需要它以60px的边距滚动，因为你可以在代码中输入。我也希望它导航速度较慢，并且有一个像/ two而不是/＃two的漂亮网址。这是如何实现的？

Answer 1

如果您已经加载了jQuery，则可以使用angular.element作为$的别名。这通常是＆＃34;适当的＆＃34;角度来做的方式。如果您不首先加载jQuery，angular.element使用jQLite，这在选择器可用方面受到限制。由于您已经在使用jQuery，我们假设您已经将它加载到角度之前。

假设你的jQuery示例按你喜欢的方式工作，你可以使用相同的选择器，用$elm代替target，减去60px并将动画计时器设置为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);
      });
    }
  }
});

Answer 2

我最终使用angular-scrollto，我认为这非常好。使用非常简单。我用bower安装它之后所要做的就是注入模块，只需将其添加到我的 HTML （只是来自github的一个例子）：

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

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

在AngularJS中滚动

2 个答案: