Go To
Smooth scroll back to the top of the page.
How to use
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF GO TO
// =======================================================
document.querySelectorAll('.js-go-to').forEach(item => {
new HSGoTo(item).init()
})
})();
</script>
Example
Below is a static Go to (meaning its position
have been overridden for demonstration purposes. However the HTML markups in the clipboard are not).
Referenced to a page
<!-- Go to -->
<a class="js-go-to go-to position-fixed" href="../index.html" style="visibility: hidden;"
data-hs-go-to-options='{
"isReferencedToOtherPage": 700
"offsetTop": 700,
"position": {
"init": {
"right": 32
},
"show": {
"bottom": 32
},
"hide": {
"bottom": -32
}
}
}'>
<i class="bi-chevron-up"></i>
</a>
<!-- End Go to -->
Methods
Parameters | Description | Default value |
---|---|---|
targetSelector |
An element to which the browser window will scroll, by clicking on the element to be initialized | null |
compensationSelector |
An element whose height will be taken into account when calculating the point, upon reaching which the scroll will end | null |
animationInit |
Name of the class that is responsible for the activation of css animation | 'animated' |
animationIn |
Name of the class, css-animation, which is given when the initialized element | 'fadeIn' |
animationOut |
Name of the class, css-animation, which is given when the initialized element disappears | 'fadeOut' |
duration |
Animation duration | 400 |
offsetTop |
Distance that must be scrolled for the initialized object to appear | 0 |
position.init |
CSS properties top || bottom || left || right , which are added when the element is initialized |
null |
position.hide |
CSS properties top || bottom || left || right , which are added when the element is disappears |
null |
position.show |
CSS properties top || bottom || left || right , which are added when an element appears |
null |
isReferencedToOtherPage |
if true , then allows you to go to another page, disabling the scroll function to the element specified in targetSelector |
null |