Documentation of
Elegant Scroll to Top Back to Top JavaScript Plugin

Install

  1. 1 Copy the elegant-scroll-to-top folder to your server’s document root folder, next to your index.html file. The elegant-scroll-to-top folder contains the css and js folders.
  2. 2 Add the Elegant Scroll to Top CSS file to the head section on your page:
     
    <link rel="stylesheet" href="http://your-domain.com/elegant-scroll-to-top/css/elegant-scroll-to-top.min.css">
  3. 3 Add the Elegant Scroll to Top JavaScript files to the head or the body section on your page:
     
    <script src="http://your-domain.com/elegant-scroll-to-top/js/elegant-scroll-to-top.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var elegantScrollToTop = new ElegantScrollToTop();
    elegantScrollToTop.init();
});
</script>
  4. 4 Set the parameters as you need.

Options

Use of parameters

You can use a JavaScript object literal for adding parameters. A JavaScript object literal is a comma-separated list of name-value pairs wrapped by curly braces.
For example: 
{
    zIndex: 1000000,
    iconStatus: true,
    iconSize: '1.125em',
    iconColor: '#fff'
}
Important! Do not add a comma after the last value.

How to set parameters

// You have the option to add parameters to the plugin constructor
document.addEventListener('DOMContentLoaded', function () {
    var elegantScrollToTop = new ElegantScrollToTop(add_your_object_literal_here);
    elegantScrollToTop.init();
});

// After you added the parameters
document.addEventListener('DOMContentLoaded', function () {
    var elegantScrollToTop = new ElegantScrollToTop({
        zIndex: 1000000,
        iconStatus: true,
        iconSize: '1.5em',
        iconColor: '#fff'
    });
    elegantScrollToTop.init();
});
You can see the full parameter list below:
Property Possible Values Default Value Description
id e.g. null, 'your-custom-id-1', 'your-custom-id-1', etc. null The id attribute of the element you want to scroll to. If the value is null, the browser scrolls to top of the page. In this case, you do not need to change this parameter. Most users leave this setting by default.
title e.g. null, 'Scroll to top', 'Back to top', etc. 'Back to top' The title and the aria-label of the button.
zIndex e.g. null, 1000, 1111111111, etc. 1000 The z-index of the button.
theme e.g. 'theme-white', 'theme-light', 'theme-midtone', 'theme-dark', 'theme-black', 'theme-1', 'theme-2', ... 'theme-10', etc. 'theme-black' The theme of the button. You can override the theme by using further options such as bgColor, iconColor, etc.
position 'bottom-left', 'bottom-center', 'bottom-right', 'top-left', 'top-center', 'top-right', 'center-left', 'center-right' 'bottom-right' The position where the button appears.
displayOffset 1000, 1200, 1500, etc. 1000 If the scroll position exceeds this value, the button appears. The value must be specified in pixels.
buttonAnimationType 'none', 'fade', 'zoom' 'zoom' The animation type how the button appears.
scrollAnimationDuration e.g. 500, 750, 1000, etc. 500 The duration time of the scroll animation in milliseconds.
margin e.g. null, '10px', '20px', '30px', etc. null The margin of the button.
width e.g. null, '48px', '56px', '60px', etc. null The width of the button.
height e.g. null, '48px', '56px', '60px', etc. null The height of the button.
borderWidth e.g. '0px', '2px', '5px', etc. '0px' The border width of the button.
borderColor e.g. 'transparent', '#000', '#454545', '#fff', etc. '#fff' The border color of the button.
borderColorHover e.g. 'transparent', '#000', '#454545', '#fff', etc. '#fff' The border color of the button in hover state.
borderColorFocus e.g. 'transparent', '#000', '#454545', '#fff', etc. '#fff' The border color of the button in focus state.
borderColorActive e.g. 'transparent', '#000', '#454545', '#fff', etc. '#fff' The border color of the button in active state.
borderRadius e.g. '0px', '4px', '50%', '999px', '12px 0px 12px 0px', etc. '999px' The radius of border for the button.
bgColor e.g. null, '#454545', '#369', '#000', '#fff', etc. null The background color of the button.
bgColorOpacity e.g. 0.5, 0.6, 0.85, etc. 1 The background color transparency of the button. The bgColor is required to use it.
bgColorHover e.g. null, '#454545', '#369', '#000', '#fff', etc. null The background color of the button in hover state.
bgColorOpacityHover e.g. 0.5, 0.6, 0.85, etc. 1 The background color transparency of the button in hover state. The bgColorHover is required to use it.
bgColorFocus e.g. null, '#454545', '#369', '#000', '#fff', etc. null The background color of the button in focus state.
bgColorOpacityFocus e.g. 0.5, 0.6, 0.85, etc. 1 The background color transparency of the button in focus state. The bgColorFocus is required to use it.
bgColorActive e.g. null, '#454545', '#369', '#000', '#fff', etc. null The background color of the button in active state.
bgColorOpacityActive e.g. 0.5, 0.6, 0.85, etc. 1 The background color transparency of the button in active state. The bgColorActive is required to use it.
boxShadowEnabled true, false true Enable or disable the shadow of the button. If the value is true, the shadow appears. If the value is false, the shadow does not appear.
boxShadowHorizontalOffset e.g. '0px', '10px', etc. '0px' The horizontal offset of the shadow. The boxShadowEnabled is required to use it.
boxShadowVerticalOffset e.g. '0px', '10px', etc. '0px' The vertical offset of the shadow. The boxShadowEnabled is required to use it.
boxShadowBlur e.g. '5px', '10px', '30px', etc. '30px' The blur of the shadow. The boxShadowEnabled is required to use it.
boxShadowSpread e.g. '0px', '10px', '30px', etc. '0px' The spread of the shadow. The boxShadowEnabled is required to use it.
boxShadowColor e.g. '#000', '#454545', etc. '#000' The color of the shadow. The boxShadowEnabled is required to use it.
boxShadowOpacity e.g. 0.05, 0.5, 0.8, 1, etc. 0.05 The transparency of the shadow. The boxShadowEnabled is required to use it.
iconType e.g. 'icon1', 'icon2', 'icon3', 'icon4', 'custom' 'icon1' The type of the icon. With setting the 'custom' value, you can add your own element. If your website uses a third-party font-based library, such as Font Awesome, you can also use it.
With the other values (e.g. icon1, icon2, etc.), you can choose from predefined icons.
iconCustomElement e.g. '<i class="elegant-scroll-to-top__icon fas fa-arrow-up"></i>', '<svg class="elegant-scroll-to-top__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">...</svg>', etc. null A custom element you want to use instead of a predefined icon. To achieve this, set the value of iconType to 'custom'. If you want the options of the icon (e.g. iconSize, iconColor) to be applied, it is important to add the "elegant-scroll-to-top__icon" class to your custom element. For example ''
iconSize e.g. '16px', '1em', '2em', etc. '16px' The size of the icon. If you use a predefined icon (e.g. icon1, icon2, etc.), the iconSize parameter applies as width and height CSS properties. If you use the iconType parameter width 'custom' value, the size applies as a font-size CSS property.
iconColor e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorHover e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in hover state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorFocus e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in focus state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
iconColorActive e.g. null, '#333', '#369', '#454545', '#fff', 'currentColor', etc. null The color of the icon in active state. If you use a predefined icon (e.g. icon1, icon2, etc.), the color applies as a fill color. If you use the iconType parameter width 'custom' value, the color applies as a CSS color property.
onShow e.g. function () { console.log('Scroll button has appeared'); } null You can call this function when the scroll button has appeared.
onHide e.g. function () { console.log('Scroll button has disappeared'); } null You can call this function when the scroll button has disappeared.
onScrollStart e.g. function () { console.log('Scrolling has started'); } null You can call this function when the scrolling has started.
onScrollEnd e.g. function () { console.log('Scrolling has ended'); } null You can call this function when the scrolling has ended.

Plugin Examples

Find several examples on the demo page demonstrate the key features of the plugin.

Browser compatibility

The Elegant Scroll To Top JavaScript plugin is compatible with all major browsers.
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera
  • Edge

Changelog

You can also find the version history (changelog.txt) file on the root folder. 
------------------------------------------------------------------------------------------------------------------
Version 1.0.1 - Oct 15 2021
------------------------------------------------------------------------------------------------------------------

- [Improved] Removed tap highlight color
- [Improved] Added transition to border color
- [Updated] Documentation


------------------------------------------------------------------------------------------------------------------
Version 1.0 - Sep 04 2021
------------------------------------------------------------------------------------------------------------------

- Initial release

Support

Support for my items includes:
  • + Answer for questions related with the plugin
  • + Answering technical questions about item’s features
  • + Assistance with reported bugs and issues
  • + Help with included 3rd party assets
Item support does not include:
  • − Customization Services
  • − Installation Services

Contact

Please remember you purchased a very affordable plugin and you don’t have to pay for a full-time web design agency for the developing. Occasionally, I will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and I provide it for your convenience, so please be patient, polite and respectful.

Contact me via email on my profile page or ask your question in the plugin’s comments section.