AngularJS中的ScrollTo函数

Question

我正在努力让快速导航正常工作.它浮在一边.当他们点击链接时,会将他们带到页面上的该ID.我正在关注Treehouse的这个指南.这就是我对滚动的看法:

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

我最初放在它之前</body>.但是我似乎遇到了一个竞争条件,那就是在quickNav编译之前触发它(它有一个ng-hide放置它,不确定是否导致它 - 但它在DOM内).

如果我在控制台中运行该代码块,则滚动按预期工作.

我认为将它移入控制器更有效 - 或者更有可能在指令中.但我没有幸运完成那件事.如何让这块代码与AngularJS一起使用？

Answer 1

这是一个简单的指令,将在点击时滚动到一个元素:

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.on('click', function() {
        $("body").animate({scrollTop: $elm.offset().top}, "slow");
      });
    }
  }
});

演示:http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD？p = preview

有关创建指令的帮助,请查看http://egghead.io上的视频,从#10"first directive"开始.

编辑:要使其滚动到由href指定的特定元素,只需检查attrs.href.

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function() {
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
      });
    }
  }
});

然后你可以像这样使用它:<div scroll-on-click></div>滚动到单击的元素.或者<a scroll-on-click href="#element-id"></div>滚动到带有id的元素.

Answer 2

如果您想使用它,这是一个更好的指令:

您可以滚动到页面中的任何元素:

.directive('scrollToItem', function() {                                                      
    return {                                                                                 
        restrict: 'A',                                                                       
        scope: {                                                                             
            scrollTo: "@"                                                                    
        },                                                                                   
        link: function(scope, $elm,attr) {                                                   

            $elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });                                                                              
        }                                                                                    
    }})     

用法(例如点击div'back-to-top'将滚动到id scroll-top):

<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll"> 

它还支持chrome,firefox,safari和IE导致的html,body元素.

Answer 3

为了动画滚动容器内的特定元素(固定DIV)

/*
    @param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
    Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
    var element = angular.element(anchor);
    angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}

Answer 4

使用$ anchorScroll http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html的角度解决方案 :

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  var i = 1;

  $scope.items = [{ id: 1, name: 'Item 1' }];

  $scope.addItem = function (){
    i++;
    //add the item.
    $scope.items.push({ id: i, name: 'Item ' + i});
    //now scroll to it.
    $location.hash('item' + i);
    $anchorScroll();
  };
});

这里有一个插件:http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM? p= preview

如果你关心一个纯粹的JavaScript解决方案,这里有一个:

使用父容器ID和目标滚动ID在代码中调用runScroll:

function runScroll(parentDivId,targetID) {
    var longdiv;
    longdiv = document.querySelector("#" + parentDivId);
    var div3pos = document.getElementById(targetID).offsetTop;
    scrollTo(longdiv, div3pos, 600);
}


function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function () {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop == to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

参考:跨浏览器JavaScript(不是jQuery ...)滚动到顶部动画