Angularjs 单击时有角度滚动

我在使用角度滚动时遇到问题。我正在尝试通过单击按钮从登录div滚动到页面上的另一个部分。我的代码格式非常奇怪，所以如果需要进一步澄清，请告诉我

HTML

app.js

angular.module('kanban')
  .component('boardComponent', {
    templateUrl: 'app/components/board/board.html',
    controller: BoardController,
    controllerAs: 'bc'
  })

BoardController.$inject = ['EsService']

function BoardController(EsService) {
  var bc = this;
  bc.lists = EsService.getLists();
  bc.addingList = false;

  bc.removeList = function(list){
    EsService.removeList(list.id);
  }

  bc.addList = function(list){
    EsService.createList(list);
    bc.newList = {};
  }

  bc.toLists = function() {
    bc.cover = angular.element(document.getElementsByClassName('cover'));
    bc.content = angular.element(document.getElementsByClassName('content'));
    bc.cover.scrollTo(bc.content, 0, 1000);
  }
}

---

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

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

html

---

对于JQuery自由答案，您可以使用

创建锚定链接：

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

---

谢谢你的建议。有没有办法用这种方法创建一个较慢的滚动动画？谢谢你的建议。不幸的是，它仍然没有触发滚动。我会继续尝试。也许插件没有加载？我想了想，但我肯定在index.html中有CDN脚本，也加载了duScroll依赖项。没关系！我发现了问题。我需要把$document注入我的控制器，可能是我的错。我的演示中有它，但代码示例中没有。我更新了。道歉。很高兴你能解决。

angular.module('kanban')
  .component('boardComponent', {
    templateUrl: 'app/components/board/board.html',
    controller: BoardController,
    controllerAs: 'bc'
  })

BoardController.$inject = ['EsService']

function BoardController(EsService) {
  var bc = this;
  bc.lists = EsService.getLists();
  bc.addingList = false;

  bc.removeList = function(list){
    EsService.removeList(list.id);
  }

  bc.addList = function(list){
    EsService.createList(list);
    bc.newList = {};
  }

  bc.toLists = function() {
    bc.cover = angular.element(document.getElementsByClassName('cover'));
    bc.content = angular.element(document.getElementsByClassName('content'));
    bc.cover.scrollTo(bc.content, 0, 1000);
  }
}

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

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

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

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

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

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