ScrollTo функція в AngularJS

Це краща директива, якщо ви хочете її використовувати:

ви можете перейти до будь-якого елемента на сторінці:

.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):

<div class="back-to-top" scroll-to-item scroll-to="#top-scroll"> 

It's also supported by chrome,firefox,safari and IE cause of the html,body element .

Для анімації до певного елемента всередині контейнера прокрутки (фіксований 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");
}

Кутовий розв'язок за допомогою $ 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();
  };
});

And here is a plunk: http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview

І якщо ви дбаєте про чисте рішення для JavaScript, ось один:

Запустити команду 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);
}

Reference: Cross browser JavaScript (not jQuery...) scroll to top animation

Спасибі Енді на прикладі, це було дуже корисно. Я закінчив реалізацію дещо іншої стратегії, оскільки я розробляю прокрутку на одній сторінці і не хочу, щоб Angular оновлювався при використанні хешбанг-URL-адреси. Я також хочу зберегти назад/вперед дії браузера.

Замість того, щоб використовувати директиву та хеш, я використовую $ $ $ scope $. Годинник у $ location.search і отримав ціль туди. Це дає хороший чіткий ярлик

Мій елемент

Я прив'язав код годинника до моєї декларації модуля у app.js так:

.run(function($location, $rootScope) {
   $rootScope.$watch(function() { return $location.search() }, function(search) { 
     var scrollPos = 0;
     if (search.hasOwnProperty('scroll')) {
       var $target = $('#' + search.scroll);
       scrollPos = $target.offset().top;
     }   
     $("body,html").animate({scrollTop: scrollPos}, "slow");
   });
})

Застереження з наведеним вище кодом полягає в тому, що якщо ви отримуєте доступ до URL безпосередньо з іншого маршруту, DOM може не завантажуватися вчасно для виклику $ target.offset() у jQuery. Рішення полягає в тому, щоб вставити цей код у веб-переглядач $ viewContentLoaded. Остаточний код виглядає приблизно так:

.run(function($location, $rootScope) {
  $rootScope.$on('$viewContentLoaded', function() {
     $rootScope.$watch(function() { return $location.search() }, function(search) {
       var scrollPos = 0 
       if (search.hasOwnProperty('scroll')) {
         var $target = $('#' + search.scroll);
         var scrollPos = $target.offset().top;
       }
       $("body,html").animate({scrollTop: scrollPos}, "slow");                                                                                                                                                                    
     });  
   });    
 })

Перевірено Chrome і FF

Я використав answer andrew anslin, який чудово працює, але спричинив зміну кутового маршруту, що створило для мене стрибкоподібний прокрут. Якщо ви хочете уникнути ініціювання зміни маршруту,

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

Інше пропозиція. Одна директива з селектором.

HTML:

<button type="button" scroll-to="#catalogSection">Scroll To</button>

Кутовий:

app.directive('scrollTo', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function() {

                var target = $(attrs.scrollTo);
                if (target.length > 0) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    });
                }
            });
        }
    }
});

Also notice $anchorScroll

Що стосується кутова прокрутка , її активно підтримують і немає жодної залежності від jQuery.

дуже чітка відповідь, використовуючи тільки ANGULARJS, ніякий jQuery не залежить

in your html somewhere on the bottom some text

у своєму html де-не-що у верхній частині <div id = "top"> </div>

у твоїх джс:

/**
 * @ngdoc directive
 * @name APP.directive:backTop
 

 */


angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '',
    scope: {
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        $anchorScroll(['top']);
      });
    }
  };
}]);