Pequeño personalizable de desplazamiento a botón superior-UE-scroll-JS

Vista prévia

Descripción

UE-scroll-JS es un pequeño plugin de JavaScript para mostrar un botón ' desplazarse a la parte superior ' personalizable en la parte inferior de la página web cuando se desplaza hacia abajo.

Funcionamiento

Instale el UE-scroll-JS a través de gestores de paquetes.

# Yarn
$ yarn add ue-scroll-js

# NPM
$ npm install ue-scroll-js --save

Importa el UE-scroll-JS en tu módulo.

import ue from 'ue-scroll-js';

O directamente incluir los archivos UE-scroll-JS ' en la página.

<link href="ue-scroll.min.css" rel="stylesheet">
<script src="ue-scroll.min.js"></script>

Cree el código HTML para el botón de desplazamiento a superior.

<div class="ue-scroll btn-white arrow-black circle"></div>

Temas de botones disponibles:

<!-- Circle -->
<div class="ue-scroll btn-white arrow-black circle"></div>
<div class="ue-scroll btn-gray arrow-white circle"></div>
<div class="ue-scroll btn-black arrow-white circle"></div>
<div class="ue-scroll btn-white arrow-black circle shadow"></div>

<!-- Rounded Rectangle -->
<div class="ue-scroll btn-white arrow-black rounded-rectangle"></div>
<div class="ue-scroll btn-gray arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-black arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-white arrow-black rounded-rectangle shadow"></div>

<!-- Square -->
<div class="ue-scroll btn-white arrow-black square"></div>
<div class="ue-scroll btn-gray arrow-white square"></div>
<div class="ue-scroll btn-black arrow-white square"></div>
<div class="ue-scroll btn-white arrow-black square shadow"></div>

O aplicar sus propios estilos CSS como estos:

<div class="ue-scroll" style="...">Back!</div>

Inicialice el plugin UE-scroll-JS.

UeScroll.init();

Opciones y valores predeterminados.

UeScroll.init({


// CSS selector

element: '#ue-scroll',


// the scroll position where the button should be displayed

position: 200,


// scrolling speed

scrollSpeed: 10,


// fading speed

fadeSpeed: 10


});

Registro de cambios

10/05/2018

• v2.0.0