what, exactly, does data-anchor-target do?

Question

I'm playing around with Skrollr and for the most part it seems pretty intuitive, the one thing that kind of gets me is the data-anchor-target attribute. Most times I don't need it but when I look at some examples it's usually included and I'm confused as to what it does. Does it just mean that at that target, that's when the Skrollr data-(pos) attributes kick in?

Answer 1

data-anchor-target When using Skrollr.js, you normally use one of two methods as inputs for starting and stopping scrolling controls:

1. Absolute positioning, relating to the start or the end of the entire document.
2. Relative positioning, relating to the top, bottom or center of the viewing browser frame.

The data-anchor-target tag enables the developer the freedom to use an alternative element to trigger a modification. You place the control position directly inside the document. Elements are identified to the target tag with simple CSS selectors (.class or #id's). When the data-anchor-target tag element is scrolled into the viewing window, the developer can use the normal relative mode data-bottom-top tag to start the desired scrolling result. Use data-top-bottom as a control for when the data-anchor-target scrolls up and out of the viewing window. Remember this image?

This is way cool, as this enables perfect control for different viewing devices, orientations and screen sizes. Take a look at the anchor-target.html example. Notice how the blue face smiles whenever the red face is visible in frame? (Note: don't get freaked out by the !0 CSS identifier in that sample. Remember in skroller, the ! exclamation symbol is used to fix a numeric field from modifying during scrolling. )