subir - smooth scroll angularjs

Desplácese hasta el anclaje después de cargar la página en Angular

Question

Necesito establecer un evento de clic para que se cargue una nueva página, y luego, una vez que la página se haya cargado, se desplaza a un punto de anclaje en la página. He intentado todas las soluciones propuestas en esta publicación SO, pero no puedo hacer que funcione correctamente.

La mayoría de esas soluciones se centran en desplazarse a un ancla en una página que ya está cargada. Necesito que el desplazamiento se produzca después de que se haya cargado una nueva página.

Aquí está mi código de vista:

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

Esto representa un botón dentro de una ''tarjeta de perfil''. Cuando el usuario hace clic en la tarjeta, la lleva a una página de perfil. Sin embargo, cuando hacen clic en el botón, deben llevarlos a la parte #jobs de esa página de perfil (de ahí el $ stopPropogation () antes de goToResultJobs (r) en el código).

Aquí es cómo se ve mi método goToResultJobs.

$scope.goToResultJobs = function(result) {
var profileUrl = result.slug;
window.location = profileUrl;
};

He intentado usar $anchorScroll y solo codificando en el ancla en profileUrl , pero ninguno funciona. Soy bastante nuevo en Angular, así que no sé lo que me estoy perdiendo aquí.

ACTUALIZACIÓN 1: Intentando usar $ timeout

Aquí está mi método goToResultJobs dentro de mi ResultsCtrl que se activa cuando el usuario hace clic en el botón:

$scope.goToResultJobs = function(result) {
var url = window.location + result.slug + ''#jobs'';
location.replace(url);
};

Eso carga la ruta de /name#jobs , que llama al ProfileCtrl a continuación:

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

Esta configuración parece funcionar, ya que la TEST solo aparece en la consola cuando se hace clic en el botón de trabajos, pero no cuando el usuario simplemente hace clic en el perfil. El problema al que me estoy enfrentando ahora es que la página comienza a cargarse, y la ruta en la barra de URL cambia a los /name#jobs , pero antes de que la página termine de cargarse, los jobs se eliminan de la URL. Por lo tanto, cuando se $anchorScroll() , no hay una etiqueta de anclaje en el hash para desplazarse.

Answer 1

¿Quizás pueda usar Element.scrollIntoView() Javascript nativo después de que se haya cargado la página?

Answer 2

Entonces, como se señaló, el $anchorScroll tiene que ocurrir después de que la página haya sido renderizada, de lo contrario el ancla no existe. Esto se puede lograr usando $timeout() .

$timeout(function() {
$anchorScroll(''myAnchor'');
});

Puedes ver este plunkr . Asegúrese de verlo en modo emergente (el pequeño botón azul en la esquina superior derecha de la pantalla de salida).

Answer 3

Santo Moly, esto se puede lograr simplemente agregando autoscroll="true" a tu plantilla:

<div autoscroll="true" data-ng-include=''"/templates/partials/layout/text-column.html"''></div>

Documentation

Answer 4

Tratar:

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'' aquí es el id del elemento html al que desea desplazarse.

Documentación aquí: https://docs.angularjs.org/api/ng/service/$anchorScroll