Skip to main content

Go to

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

Overview

hs.go-to.js resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

            
              <script src="../../assets/js/components/hs.go-to.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
                  $.HSCore.components.HSGoTo.init('.js-go-to');
                });
              </script>

Basic example 

            
              <a class="js-go-to" href="#">
                <span class="fa fa-arrow-up"></span>
              </a>

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).

HTML:

            
              <a class="js-go-to u-go-to" href="#"
                 data-position='{"bottom": 15, "right": 15 }'
                 data-type="fixed"
                 data-offset-top="400"
                 data-compensation="#header"
                 data-show-effect="slideInUp"
                 data-hide-effect="slideOutDown">
                <span class="fa fa-arrow-up u-go-to__inner"></span>
              </a>

JS library and initialization:

            
              <!-- JS Space -->
              <script src="../../assets/js/components/hs.go-to.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(function () {
                  // initialization of go to
                  $.HSCore.components.HSGoTo.init('.js-go-to');
                });
              </script>

Referenced to a page

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

HTML:

            
              <a class="js-go-to u-go-to" href="#"
                 data-position='{"bottom": 15, "right": 15 }'
                 data-is-referenced-to-page="true"
                 data-type="fixed"
                 data-offset-top="400"
                 data-compensation="#header"
                 data-show-effect="slideInUp"
                 data-hide-effect="slideOutDown">
                <span class="fa fa-arrow-up u-go-to__inner"></span>
              </a>

JS library and initialization:

            
              <!-- JS Space -->
              <script src="../../assets/js/components/hs.go-to.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(function () {
                  // initialization of go to
                  $.HSCore.components.HSGoTo.init('.js-go-to');
                });
              </script>

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".

Attribute Description

data-target

 The ID of the block to which the page will be scrolled.

data-is-referenced-to-page

 If set to true, enables the button to link to a page.

data-type

 Button positioning. Valid values are:
  • static - the button is placed static. The following attributes are ignored:
    • data-position
    • data-compensation
    • data-offset-top
  • absolute - the button is positioned relative to the parent having the position: relative.
  • fixed - the button is positioned fixed to the browser window.

data-show-effect

 Revealing effect. All effects are tied to the library animate.css

data-hide-effect

 Disappearing effect. All effects are tied to the library animate.css

data-compensation

 If data-type="" is set to fixed or absolute, it takes an Object with parameters top, bottom, left, right, which determine the distances from the edges of the parent element.

data-position

 The ID of the element whose height is counted by the scroll when scrolling. For example, if you specify in the #header parameter, then when you scroll to the desired item, the animation will stop higher at the height of the header.

data-offset-top

 If data-type="" is set to fixed, then specifies how far from the top of the page the button appears and the effect specified in the data-show-effect works.