点击角度滚动

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