Функция ScrollTo на AngularJS

Я'м пытаясь получить быстрый навигация для правильной работы. Это'плавающего на стороне. При нажатии на ссылку, он принимает их, что ID на странице. Я'м после этого руководство из Treehouse. Это то, что у меня есть для прокрутки:

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

Я изначально положил его перед в </тело и GT;. Но мне кажется, нарваться на гонки, где была перестрелка перед quickNav составлен (в нем есть `НГ-скрыть, размещенные на нем, не уверен, если это's причиной - но это в дом).

Если я запускаю этот кусок кода в консоли, то прокрутка работает, как ожидалось.

Я полагал, что это'd быть более эффективным, чтобы переместить это в контроллер - или, скорее, в директиве. Но я'м не имея достижении удачи. Как я могу получить этот блок кода для работы с AngularJS?

EnigmaRM
Редактировал вопрос 25-го июня 2013 в 4:25
Программирование
javascript jquery anchor scroll angularjs
24-го июня 2013 в 7:58
39 просмотров
Решение

Вот простая директива, которая будет выделите элемент на нажмите:

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 "первый директивы и".

редактировать: чтобы сделать его прокрутки для конкретного элемента, указанного в рот, просто проверить у attrs.Солар`.

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

Затем вы можете использовать его как это: <свиток-на кнопку див></дел> для прокрутки к элементу кликнули. Или в <свиток-на-щелкните href=" и#элемент-ИД" и></дел> чтобы перейти к элементу с ID.

Andrew Joslin
Редактировал ответ 25-го июня 2013 в 5:46
Комментарии (11)

Это лучший директивы в случае, если вы хотите использовать его:

вы можете перейти к любому элементу на странице:

.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 'назад-вверх' будет выделить код прокрутка-вверх):

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

Это's также поддерживается в Chrome,Firefox,сафари и IE вызвать в HTML,элемент Body .

Комментарии (1)

Для того, чтобы анимировать на определенный элемент внутри контейнера прокрутки (фиксированный див)

/*
    @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");
}
Комментарии (0)

Угловое решение, используя $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-решение, вот один:

Вызвать runScroll в коде с родительского контейнера ID и идентификатор целевого свиток:

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

Ссылка: https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation

Community
Редактировал ответ 23-го мая 2017 в 11:54
Комментарии (2)

Я использовал Эндрю Джослин'ы ответ, который прекрасно работает, но срабатывает угловой изменении маршрута, который создан нервный глядя прокрутить для меня. Если вы хотите избежать изменения маршрута, 

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;
      });
    }
  }
});
Комментарии (0)

Спасибо за пример Энди, это было очень полезно. Я закончил реализация немного другая стратегия, поскольку я занимаюсь разработкой одной странице прокрутки и не хочу угловой для обновления при использовании hashbang URL-адрес. Я также хочу сохранить назад/вперед действий в браузере.

Вместо того, чтобы использовать директивы и хэш, я использую $объем$.смотреть на $расположение.поиск и получение целевой оттуда. Это дает хороший тег чистый якорь

в <а НГ-с href=" и#/?=myElement на&quot прокрутки;>моя стихия</а>

Я запер посмотреть код в моей декларации модуля в 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-адрес непосредственно от другой маршрут, то дом не может быть загружен во времени для 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");                                                                                                                                                                    
     });  
   });    
 })

Проверял С хрома и ФФ

Комментарии (0)

Как насчет угловые-свиток, Это'ы активно поддерживается и нет зависимостей на jQuery..

Комментарии (0)

Еще одно предложение. Одна директива с селектора.

HTML-код:

Scroll To

Угловой:

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

Также обратите внимание $anchorScroll

Комментарии (0)

очень четкий ответ, используя только в AngularJS, никаких jQuery и зависит

в HTML где-то на дне <назад-топ и GT;текст</бэк-топ>

в HTML где-то на вершине в <див ИД=то"сверху" и></див>

в ваших JS:

/**
 * @ngdoc directive
 * @name APP.directive:backTop
 <pre>

 </pre>
 */

angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<span class=\'btn btn-mute pull-right\'></span>',
    scope: {
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        $anchorScroll(['top']);
      });
    }
  };
}]);
Комментарии (1)