Угловая прокрутка по клику

Question

У меня возникла проблема с получением Углового прокрутки для работы. Я пытаюсь прокручивать с посадочного div в другой раздел на странице нажатием кнопки. Мой код отформатирован очень странно, поэтому дайте мне знать, если потребуется дополнительное разъяснение.

HTML

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

init.js

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

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

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