Go to
This "Go to" library allows users to smoothly scroll back to the top of the page.
Overview
hs.go-to.js
resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.
How to use?
Wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin.
Copy-paste the following <script>
near the end of your pages under JS Space to enable it.
<script src="../../assets/js/components/hs.go-to.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>
Default go to style
Below is a static Go to (meaning its position
have been overridden for demonstration purposes. However the HTML markups in the clipboard are not).
HTML:
<a class="js-go-to u-go-to" href="#"
data-position='{"bottom": 15, "right": 15 }'
data-type="fixed"
data-offset-top="400"
data-compensation="#header"
data-show-effect="slideInUp"
data-hide-effect="slideOutDown">
<span class="fa fa-arrow-up u-go-to__inner"></span>
</a>
JS library and initialization:
<!-- JS Space -->
<script src="../../assets/js/components/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(function () {
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>
Referenced to a page
Add data-is-referenced-to-page="true"
and a link to the href to use it as a link button.
HTML:
<a class="js-go-to u-go-to" href="#"
data-position='{"bottom": 15, "right": 15 }'
data-is-referenced-to-page="true"
data-type="fixed"
data-offset-top="400"
data-compensation="#header"
data-show-effect="slideInUp"
data-hide-effect="slideOutDown">
<span class="fa fa-arrow-up u-go-to__inner"></span>
</a>
JS library and initialization:
<!-- JS Space -->
<script src="../../assets/js/components/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(function () {
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-target=""
.
Attribute | Description |
---|---|
|
The ID of the block to which the page will be scrolled. |
|
If set to true , enables the button to link to a page. |
|
Button positioning. Valid values are:
|
|
Revealing effect. All effects are tied to the library animate.css |
|
Disappearing effect. All effects are tied to the library animate.css |
|
If data-type="" is set to fixed or absolute , it takes an Object with parameters top, bottom, left, right, which determine the distances from the edges of the parent element. |
|
The ID of the element whose height is counted by the scroll when scrolling. For example, if you specify in the #header parameter, then when you scroll to the desired item, the animation will stop higher at the height of the header. |
|
If data-type="" is set to fixed , then specifies how far from the top of the page the button appears and the effect specified in the data-show-effect works. |