Desplazamiento suave multifuncional en JavaScript puro-BLOB-scroll

Vista prévia

Descripción

BLOB-Scroll es una biblioteca JavaScript pequeña pero multifuncional que proporciona una funcionalidad suave, vertical/horizontal ' desplazarse a ' en su aplicación Web.

La biblioteca desplaza suavemente la página a un elemento específico o un punto específico dentro del documento, con velocidad de animación configurable y efecto de aceleración.

Funcionamiento

Importe el script BLOB-scroll. js en el documento.

<script src="js/blob-scroll.js"></script>

Desplácese hasta la parte superior de la Página Web. Ideal para el botón de atrás a arriba.

blobScroll.scroll();

Desplácese por la página hasta un punto específico.

// 300px
blobScroll.scroll(300);

Desplace la página a un elemento específico.

blobScroll.scroll(document.getElementById('element'));

// or

blobScroll.scroll('#element');

Habilite todos los enlaces de anclaje dentro del documento para desplazar suavemente la página web a sus correspondientes setions.

const links = document.querySelectorAll('a[href^="#"]');
for (let i = 0; i < links.length; ++i) {


links[i].addEventListener('click', function(e) {




e.preventDefault();




blobScroll.scroll(e.target.getAttribute('href'));


});


}

Opciones posibles para personalizar el comportamiento de desplazamiento suave. Puede pasar las siguientes opciones como un objeto a la función Scroll .

blobScroll.scroll(300,{


// Axis.

axis: 'y',


// Animation length in milliseconds.

duration: 500,


/*


If provided, will be added to the scroll target's true


position. To scroll beyond a target — to e.g. account


for a sticky header — supply a negative number; to under-


scroll, provide a positive one.

*/

offset: 0,


// The parent. Default is the window.

parent: document.documentElement,


/*


linear


ease


easeInQuad


easeOutQuad


easeInOutQuad


easeInCubic


easeOutCubic


easeInOutCubic


easeInQuart


easeOutQuart


easeInOutQuart


easeInQuint


easeOutQuint


easeInOutQuint

*/

transition: 'ease',


// Optional callback to execute when finished.

callback: null

});

Registro de cambios

09/05/2018

• más soluciones de Edge/IE

09/02/2018

• corrección de desplazamiento de elemento para Edge