Question

我在让Angular Scroll工作时遇到问题。我正试图通过点击按钮从登陆div滚动到页面上的另一个部分。我的代码格式很奇怪，所以如果需要进一步澄清，请告诉我。

HTML

XHR send

init.js

<div class="cover">
  <div class="big-logo">
    <i class="fa fa-trello"></i>
    <span> My Kanban</span>
    <br>
    <button class="arrow" ng-click="bc.toLists()" du-smooth-scroll>
      <i class="fa fa-angle-double-down fa-sm animated flash infinite" aria-hidden="true"></i>
    </button>
  </div>
</div>

<div class="story-board content">
  <button class="add-list" ng-click="bc.addingList = !bc.addingList">
    Add List
  </button>
  <div ng-if="bc.addingList">
    <form ng-submit="bc.addList(bc.newList)">
      <input style="margin-left: 5px" ng-model="bc.newList.name"/>
      <button type="submit">+</button>
    </form>
  </div>
  <div class="list" ng-repeat="list in bc.lists">
    <button style="font-size: 10px;background: none;border:none; color: black" ng-click="bc.removeList(list)">x</button>
    <list-component list-obj="list"></list-component>  
  </div>
</div>

app.js

angular.module('kanban', ['duScroll'])

Answer 1

我建议让你的控制器处理滚动而不是指令。你将以更严格的方式控制，因此可以调试任何问题。

以下是使用scrollToElement方法的示例。一旦你有了这个逻辑，你可以将它切换到你需要的任何方法。

Here's a working demo

angular
  .module('app', ['duScroll'])
  .component('cmpExample', {
    templateUrl: 'path/to/template.html',
    controller: function($document) {
      var vm = this;

      vm.scrollTo = function(id) {
        $document
          .scrollToElement(
            angular.element(document.getElementById(id)), 0, 1000
          );
      }
    }
  });

HTML

<button ng-click="$ctrl.scrollTo('target')">

<div id="target">Content further down the page</div>

Answer 2

对于JQuery免费回答，您可以使用$anchorScroll

创建您的锚链接：

<button ng-click="$ctrl.scrollTo('anid')">Scroll</button>

创建锚点以滚动到：

<div id="anid">Land here</div>

然后你的控制器：

controller: function($anchorScroll) {
  this.scrollTo = function(id) {
    $anchorScroll(id);
  }
}

点击时的角度滚动

2 个答案: