javascript - angularjs ui-router animated scroll to anchor -
i have found can navigate anchor points using ui-router setting links this:
<ul> <li><a ui-sref="home({ '#': 'creative' })">creative</a></li> <li><a ui-sref="home({ '#': 'work' })">work</a></li> <li><a ui-sref="home({ '#': 'contact' })">contact</a></li> </ul> while great, animate anchor position. figured use 1 of state events, tried this:
$transitions.onfinish({ to: true }, function () { console.log('the state has changed'); console.log($location.hash()); var hash = $location.hash(); if (hash) { var target = document.queryselector('#' + hash); console.log(target); var element = angular.element(target); console.log(element); $document.scrolltoelement(element, 0, 2000); } else { // scroll top of page document.body.scrolltop = document.documentelement.scrolltop = 0; } }); but view hasn't loaded yet, element not anywhere find. if there way of animating scrollto?
main idea add animation in proper moment. proper moment when view loaded , compiled. how can 100% sure view loaded , compiled? add directive view!
when view ready, directive initialized , can bind animation element. it.
Comments
Post a Comment