Logo Logo v2.0
Image Description Image Description

No Results

  • Get Support
  • Preview Demo
Logo Logo v2.0
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Dark Mode New
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index
  • Opacity

Go To

Smooth scroll back to the top of the page.

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins 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>
            (function() {
              // INITIALIZATION OF GO TO
              // =======================================================
              document.querySelectorAll('.js-go-to').forEach(item => {
                new HSGoTo(item).init()
              })
            });
          </script>
        
      

Example

Below is a static Go to (meaning its position have been overridden for demonstration purposes. However the HTML markups in the clipboard are not).

  • Preview
  • HTML
              
                <!-- Go to -->
                <a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
                   data-hs-go-to-options='{
                     "offsetTop": 700,
                     "position": {
                       "init": {
                         "right": 32
                       },
                       "show": {
                         "bottom": 32
                       },
                       "hide": {
                         "bottom": -32
                       }
                     }
                   }'>
                  <i class="bi-chevron-up"></i>
                </a>
                <!-- End Go to -->
              
            

Referenced to a page

  • Preview
  • HTML
              
                <!-- Go to -->
                <a class="js-go-to go-to position-fixed" href="../index.html" style="visibility: hidden;"
                   data-hs-go-to-options='{
                     "isReferencedToOtherPage": 700
                     "offsetTop": 700,
                     "position": {
                       "init": {
                         "right": 32
                       },
                       "show": {
                         "bottom": 32
                       },
                       "hide": {
                         "bottom": -32
                       }
                     }
                   }'>
                  <i class="bi-chevron-up"></i>
                </a>
                <!-- End Go to -->
              
            

Methods

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