Go to

This "Go to" library allows users to smoothly scroll back to the top of the page.

How to use?

Copy-paste the following <script> near the end of your pages under JS Front 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>
                  $(document).on('ready', function () {
                    // initialization of go to
                    $('.js-go-to').each(function () {
                      var goTo = new HSGoTo($(this)).init();
                    });
                  });
                </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).

                    
                      <a class="js-go-to go-to position-fixed" href="#" style="visibility: hidden;"
                          data-hs-go-to-options='{
                           "offsetTop": 700,
                           "position": {
                             "init": {
                               "right": 15
                             },
                             "show": {
                               "bottom": 15
                             },
                             "hide": {
                               "bottom": -15
                             }
                           }
                         }'>
                        <i class="fas fa-arrow-up"></i>
                      </a>
                    
                  

Referenced to a page

Add data-is-referenced-to-page="true" and a link to the href to use it as a link button.

                    
                      <a class="js-go-to go-to position-fixed" href="#" style="visibility: hidden;"
                          data-hs-go-to-options='{
                           "isReferencedToOtherPage": 700
                         }'>
                        <i class="fas fa-arrow-right"></i>
                      </a>
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/front/go-to/

JavaScript behavior

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-go-to-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-go-to-options='{}'.

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