Go To
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function() {
// INITIALIZATION OF GO TO
// =======================================================
document.querySelectorAll('.js-go-to').forEach(item => {
new NueGoTo(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="" style="visibility: hidden;"
data-nue-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 |