John clears up the concept of "anchorScroll", the default behavior of scrolling to anchors, and how to override and implement your own custom behavior.

https://app.egghead.io/api/v1/lessons/using-anchorscroll/subtitles

Using $anchorScroll

[00:00] Anchorscroll is a difficult service to understand by simply reading the docs, because it's describing a default behavior and how to change the default behavior, and then how to reenable the default behavior. Let's look through this example. We basically have a list of A through Z, and I scroll down, you can see each of those are bound to these anchors. 

[00:20] If I click on L, it'll take me down to L. If I click on X, it'll take me down as far as it can to X, and so on, and so forth. Click on D, takes me to D. This is the default behavior whenever you use location hash telling it to go to that anchor. Basically whenever I click on this, it's saying go to A, B, C, D, or E. if I don't want it to do that, what you do is anchorscroll provider, disable auto scrolling.

[00:49] Then when I refresh here, and I click on G, it's not going to school to that anchor, it's just going to sit there. You can see that the hash actually changes up here, but it's not going to go to those different anchors. If you're curious about the double hash here, this first hash would have the path after it, and then this is the anchor after that.

[01:09] If you're in a scenario where you want to disable the auto scrolling, but you want to control the scrolling manually, you can use the anchorscroll service, and then just invoke that after some hash has changed. If I refresh again, you can see it's re-enabled back to the default behavior. If you're in a scenario where you don't want it to automatically scroll whenever you change the hash, and you want to control that yourself, that's when you would disable the default behavior, and then control it the way that you want to control it.

[01:45] Whether it's loading certain views at the bottom of the page and not wanting to scroll to them automatically, or scenarios like that. A quick note here, just to make this demo pretty, I loaded a library called tiny color which you can check out on GitHub here, and it just allowed me to generate this color palette based on how many things I passed in, and off of the base color steel blue.

[02:04] [cuts off]

Using $anchorScroll

Share this video with your friends