Logo v4.1
图片描述内容

没结果

  • 获取支持
  • 预览演示
Logo v4.1
  • 文档
  • 代码片段
  • 开发文档
  • 介绍
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • 设计 & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • 组件s
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • 面包屑
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • 高级 Forms
  • 高级 Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

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
              // =======================================================
              new HSGoTo('.js-go-to')
            });
          </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).

  • 预览
  • 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

  • 预览
  • 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