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 Blueberry 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>
                    
                  

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='{}'.