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

skrollr
Jason Ip picture Jason Ip · May 13, 2014 · Viewed 10.4k times · Source

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

zipzit picture zipzit · Apr 9, 2015

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?

pictorial

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. )

Related questions

Change Image on Scroll Position

I would like to change an image on a certain scroll position. For example: Scroll 100px show img1.jpg Scroll 200px show img2.jpg Scroll 300px show img3.jpg Here I found an example what I mean. Any ideas?

Read More
Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page. The problem can be seen here: http://codepen.io/…

Read More
Angular2 Directive: How to detect DOM changes

I want to implement Skrollr as an Angular2 attribute directive. So, the format may be: <body my-skrollr> </body> However, in order to implement this, I need to be able to detect changes in the DOM in …

Read More