anchorScroll offset

ionic-v1
1

Can someone please tell me how to set the yOffset when calling $ionicScrollDelegate.anchorScroll(true)? I have banged my head against the wall on this for nearly 6 hours!!! I saw that there were a few threads about this a while ago and a Github response said that it was fixed using the “ScrollBy()” element, but there is no documentation on this. I have a really “hacky” hack working - but I’d love to have a real solution. Anybody??

2

there is documentation on it

see http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

 scrollBy(left, top, [shouldAnimate]) (The y-offset to scroll by.)
3

Thanks for the quick reply! So I got scrollBy() to work, but not in conjunction with anchorScroll(). I need it to target specific elements with and offset… not just move it a bit. $ionicScrollDelegate.anchorScroll().scrollBy(0, 80, true); <<< that’s what I’m looking for, but it doesn’t work. Am I missing something?

4

anchorScroll is defined by using a hash (or if no hash, scroll to top)
an anchor is either top, bottom, middle or whatever they define.
i think you are maybe miss-understanding the feature?

what you can do is: describe exactly what should happen. maybe we can help you then.

5

Hey there, so anchor scrolling is handled a bit differently in angular.

So while traditional javascript/jquery you could just do this.



<div id="link"></div>

<a href="#link">got to #link</a>

Anular treats the # a bit differently.
Since internally they use that in part of their page linking, it will expect you to be going to a view who’s urls is link, not anchor scroll.

So to work around this, they have you pass in a hash to the to window location

https://docs.angularjs.org/api/ng/service/$anchorScroll

An example of this with angular and ionic can be seen here

6

So I found a resolution to this (kind of). What I ended up doing is targeting the anchor to the previous FAQ and that gave me the result I needed although it is not a solution to the yOffset not working. Here’s the code - if it would help:

$scope.faqClick = function(index){
if(index != 0) {
$location.hash(“faq”+(index-1));
$ionicScrollDelegate.anchorScroll(true);
$timeout(function() { $location.hash(""); }, 1000);
}
}

7

In case it still matter. This works for me.

$scope.scrollTo = function(id) {
if($location.hash() !== id){
$location.hash(id);
$ionicScrollDelegate.anchorScroll(true);
$ionicScrollDelegate.scrollBy(0, [yoffset], true);
}
};