Simple scroll to a specific container. Used on "Jump To" links of this documentation.
/*
:: Plugin File
src/js/sow.core/sow.scroll_to.js
:: Plugin Init
*/ $.SOW.core.scroll_to.init('.scroll-to');
/*
:: Plugin Options|Defaults
*/ $.SOW.core.scroll_to.init('.scroll-to', {
// button scroll to speed
speed: 400,
// scroll 2 top
s2t_enable: true,
s2t_class: 'btn-secondary',
s2t_position: 'end', // start = left, end = right (inverted for RTL)
s2t_mob_minH: 1200, // min. content height to show on mobile
s2t_dsk_minH: 2300, // min. content height to show on desktop
// when scrolling, button is shown if currentScroll > minH / 2
});
<!--
Additional Attributes
(positive or negative) By default if header
is sticky, is auto calculated!
data-offset="0"
Scroll speed
data-speed="400"
update URL hash
data-update-hash="false"
set a delay in ms
data-delay="0"
-->
<a href="#section_0" class="scroll-to">
Plugin info
</a>
// Using Javascript Code
// $.SOW.helper.scrollAnimate(_el, _top_offset, _hash_change, _speed);
$.SOW.helper.scrollAnimate('#section_0', 100, false, 200);
Please note, this is "that" scroll to top button,common on many websites - when user is scrolling down long pages, a little button will appear in that right - bottom. On click, the page goes to top!
Is added dinamically! You can overwrite the defaults layout by adding to <body>
few attributes.
<!--
add to <body>
If HTML is used, you need to add to all pages.
Or change default config in in gulp.config__core.js
-->
data-s2t-disable="true"
data-s2t-position="start|end"
data-s2t-class="btn-secondary btn-sm" (default)
data-s2t-class="btn-secondary rounded-circle"
data-s2t-class="btn-warning rounded-circle"
Required, to enable on admin:
data-s2t-disable="false"