How to setup and use the yOffset property of $anchorScroll in AngularJS

Question

I use the $anchorScroll-service in AngularJS. It works fine. But I have a fixed navigation bar at the top and the scrolling location goes always x-pixels to far.

Now in the $anchorScroll documentation there is a property called yOffset. According to the documentation it should fix my problem.

I don't know how to use this yOffset-property however, because this specific part has no example.

How can I use the yOffset-property of the $anchorScroll-service?

Gyniatrics

Answer 1

There is an example that illustrates how to use yOffset at the bottom of the $anchorScroll documentation.

// offset position by 100px down from the top
$anchorScroll.yOffset = 100;

This is the example plunker

Mirandamire

Never scrolled down enough... How adequate for this question :) – Gyniatrics

This can be used right above the $anchorScroll too for individual sets. – Woodring

Anybody ever followed the docs and had this not work? I'm in the boat, trying to determine what the "obvious" component is that I am missing. Doesn't seem like there's much to mess up, I just set $anchorScroll.yOffset = 100; on a module run then have a goTo() function in a controller. Changing the $anchorScroll.yOffset value fails to have any effect. – Thetis

Wait, you mean that you set it using a global mutable property which can screw up every other call to $anchorscroll ? In what world is this a good idea ? – Millet

I'm using material-design-lite - Material Design Components in CSS, JS and HTML and am attempting to offset an anchorScroll for elements in mdl-layout__content. The offset doesn't work; looks like it's incompatible. – Kitchens

Setting the yOffset does not work . I did $anchorScroll.yOffset = -105; in the app run , but it does not seam to work for some reason . – Tambourine

If you're having trouble getting yOffset working and your URL hashes and anchor IDs are the same, check first that it's not the native browser anchor scroll that you're experiencing - that will not take into account any yOffset. – Marjoriemarjory