Прокрутите до привязки после загрузки страницы в Angular
Мне нужно установить нг щелкните событие, так что, что он загружает новую страницу, а затем, после загрузки страницы, прокручивается на точку привязки на этой странице. Я пробовал каждое предлагаемое решение на этом сообщении SO, но я не могу заставить его работать правильно.
Большинство этих решений сосредоточены вокруг прокрутки до привязки на уже загруженной странице. Мне нужно, чтобы прокрутка появлялась после загрузки новой страницы.
Вот мой код:
<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>
Это представляет собой кнопку внутри "карты профиля". Когда пользователь нажимает на карту, она переводит их на страницу профиля. Однако, когда они нажимают кнопку, нужно передать их в часть #jobs этой страницы профиля (отсюда $stopPropogation() перед goToResultJobs (r) в коде).
Вот как выглядит мой метод goToResultJobs.
$scope.goToResultJobs = function(result) {
var profileUrl = result.slug;
window.location = profileUrl;
};
Я попытался использовать $anchorScroll
и просто hardcoding в привязке в profileUrl
, но никто не работает. Я новичок в Angular, поэтому не знаю, что мне здесь не хватает.
ОБНОВЛЕНИЕ 1: попытка использования $timeout
Вот мой метод goToResultJobs
в моем ResultsCtrl, который запускается, когда пользователь нажимает кнопку:
$scope.goToResultJobs = function(result) {
var url = window.location + result.slug + '#jobs';
location.replace(url);
};
Загружает путь /name#jobs
, который вызывает ProfileCtrl ниже:
app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
if(window.location.hash) {
$timeout(function() {
console.log('TEST');
// $location.hash('jobs');
// $location.hash('jobs');
$anchorScroll();
}, 1000);
};
}]);
Эта настройка работает, поскольку TEST
отображается только на консоли при нажатии кнопки "Задания", но не тогда, когда пользователь просто нажимает на профиль. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что страница начинает загружаться, а путь в строке url изменяется на /name#jobs
, но до завершения загрузки страницы jobs
удаляется из URL-адреса. Поэтому, когда вызывается $anchorScroll()
, в хеше нет метки привязки для прокрутки.
Ответы
Ответ 1
Итак, как указано, $anchorScroll
должен произойти после того, как страница была отображена, в противном случае якорь не существует. Это может быть достигнуто с помощью $timeout()
.
$timeout(function() {
$anchorScroll('myAnchor');
});
Вы можете видеть этот plunkr. Не забудьте просмотреть его в режиме всплытия (маленькая синяя кнопка в правом верхнем углу экрана вывода).
Ответ 2
Святая моля, это можно сделать, просто добавив autoscroll="true"
к вашему шаблону:
<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>
Документация
Ответ 3
Try:
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
$anchorScroll();
};
}]);
'bottom' здесь - идентификатор вашего элемента html, к которому вы хотите перейти.
Документация здесь: https://docs.angularjs.org/api/ng/service/$anchorScroll
Ответ 4
Возможно, после загрузки страницы можно использовать собственный JavaScript Element.scrollIntoView()?
Ответ 5
мое решение
export function onAnchorClick(fragment){
fragment.subscribe(f=>{
const element = document.querySelector( "#" + f )
if ( element ) {
element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"})
}
})
}