Go to

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

Basic example that highlights today's day.

Result
HTML

                  
                    <a class="js-go-to" href="#">
                      <span class="fas 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).

Result
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="fas fa-arrow-up u-go-to__inner"></span>
                    </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.

Result
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="fas fa-arrow-up u-go-to__inner"></span>
                    </a>

                  
                    <a class="js-go-to u-go-to-modern" href="javascript:;"
                       data-target="#clipboardSection"
                       data-type="static">
                      <span class="fas fa-arrow-down u-go-to-modern__inner"></span>
                    </a>

Vertical arrow go to style

Result
HTML

                  
                    <a class="js-go-to u-go-to-ver-arrow" href="javascript:;"
                       data-target="#smipperForVerArrows"
                       data-type="static">
                      <span class="fas fa-long-arrow-alt-down u-go-to-ver-arrow__inner"></span>
                    </a>

Wave go to style

Result
HTML

                  
                    <div class="position-relative text-center mx-auto">
                      <a class="js-go-to" href="javascript:;"
                         data-type="absolute"
                         data-position='{
                           "bottom": 86,
                           "right": 0,
                           "left": 0
                         }'
                         data-compensation="#header"
                         data-show-effect="slideInUp"
                         data-hide-effect="slideOutDown">

                        <!-- SVG Wave Shape -->
                        <figure class="u-go-to-wave ie-go-to-wave">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 208 44" style="margin-bottom: -32px; enable-background:new 0 0 208 44;" xml:space="preserve">
                            <path class="fill-primary" d="M0,43c0,0,22.9,2.2,54-18.7S95.1,1.5,95.1,1.5s11.2-3.5,20.1,0.1s10.4,3.7,19.2,9.3c7.7,4.8,15,10.1,22.8,14.9
                              c10.1,6.2,21.5,11.7,33,14.8C191.6,41,208,44,208,43c0,0,0,1,0,1H0V43z"/>
                          </svg>

                          <span class="fas fa-angle-double-up text-white u-go-to-wave__icon"></span>
                        </figure>
                        <!-- End SVG Wave Shape -->
                      </a>
                    </div>

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.