Anchor Scroll
Now with superpowers
Default
Point an element by Id
<a data-fc-modules="anchor-scroll" href="#box-foreground">Anchor to box foreground</a>
<div id="box-background" class="box _background">
<h1>Hey ya!</h1>
<p>I'm just here to give some scroll</p>
</div>
<div id="box-foreground" class="box _foreground">
<h1>Hey ya!</h1>
<p>Come with papa!</p>
</div>Substract height of another element
Point an element by Id and substract the height of another element. It's very useful when you have sticky headers.
Anchor to box foreground
Hey ya!
I'm just here to give some scroll
Substract my height to the anchor
Hey ya!
Come with papa!
<a data-fc-modules="anchor-scroll" data-fc-substract="#box-substract-primary" href="#box-substract-foreground">Anchor to box foreground</a>
<div id="box-substract-background" class="box _background mb-n">
<h1>Hey ya!</h1>
<p>I'm just here to give some scroll</p>
</div>
<div id="box-substract-primary" class="box _primary mb-n">
<h1>Substract my height to the anchor</h1>
</div>
<div id="box-substract-foreground" class="box _foreground">
<h1>Hey ya!</h1>
<p>Come with papa!</p>
</div>Adds height of another element
Point an element by Id and adds the height of another element. It's very useful when you have sticky headers.
Anchor to box foreground
Hey ya!
I'm just here to give some scroll
Adds my height to the anchor
Hey ya!
Come with papa!
<a data-fc-modules="anchor-scroll" data-fc-add="#box-add-primary" href="#box-add-foreground">Anchor to box foreground</a>
<div id="box-add-background" class="box _background mb-n">
<h1>Hey ya!</h1>
<p>I'm just here to give some scroll</p>
</div>
<div id="box-add-primary" class="box _primary mb-n">
<h1>Adds my height to the anchor</h1>
</div>
<div id="box-add-foreground" class="box _foreground">
<h1>Hey ya!</h1>
<p>Come with papa!</p>
</div>Attributes
href
-
The href of the link will be the id of the element to point
data-fc-substract
-
Jquery selector of the element to substract height.
data-fc-add
-
Jquery selector of the element to add height.