Я'м пытаясь получить быстрый навигация для правильной работы. Это'плавающего на стороне. При нажатии на ссылку, он принимает их, что 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?
Вот простая директива, которая будет выделите элемент на нажмите:
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.
Это лучший директивы в случае, если вы хотите использовать его:
вы можете перейти к любому элементу на странице:
.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 .
Для того, чтобы анимировать на определенный элемент внутри контейнера прокрутки (фиксированный див)
/*
@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();
};
});
А вот бухнуть: 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);
}
Я использовал Эндрю Джослин'ы ответ, который прекрасно работает, но срабатывает угловой изменении маршрута, который создан нервный глядя прокрутить для меня. Если вы хотите избежать изменения маршрута,
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;
});
}
}
});
Спасибо за пример Энди, это было очень полезно. Я закончил реализация немного другая стратегия, поскольку я занимаюсь разработкой одной странице прокрутки и не хочу угловой для обновления при использовании hashbang URL-адрес. Я также хочу сохранить назад/вперед действий в браузере.
Вместо того, чтобы использовать директивы и хэш, я использую $объем$.смотреть на $расположение.поиск и получение целевой оттуда. Это дает хороший тег чистый якорь
в <а НГ-с href=" и#/?=myElement на" прокрутки;>моя стихия</а>
Я запер посмотреть код в моей декларации модуля в 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");
});
});
})
Проверял С хрома и ФФ
Еще одно предложение. Одна директива с селектора.
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
});
}
});
}
}
});
Также обратите внимание $anchorScroll
очень четкий ответ, используя только в AngularJS, никаких jQuery и зависит
в HTML где-то на дне <назад-топ и GT;текст</бэк-топ>
в HTML где-то на вершине в <див ИД=то"сверху" и></див>
в ваших JS:
/**
* @ngdoc directive
* @name APP.directive:backTop
<pre>
<back-top></back-top>
</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\'><i class=\'glyphicon glyphicon-chevron-up\'></i><ng-transclude></ng-transclude></span>',
scope: {
},
link: function(scope, element) {
element.on('click', function(event) {
$anchorScroll(['top']);
});
}
};
}]);