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 

                    
                      <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