Biblioteca de desplazamiento suave de JS puro para aplicación de una sola página-pfSmoothScroll
| Autor: | PavelFomin90 |
|---|---|
| Views Total: | 2,091 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 10, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
pfSmoothScroll es una pequeña (~ 4Kb unminified) Biblioteca de JavaScript que permite a los enlaces de anclaje para desplazarse suavemente a través del contenido seccionado dentro de la aplicación Web de una sola página.
Funcionamiento
Coloque el script pfSmoothScroll. js al final del documento HTML.
<script src="js/pfSmoothScroll.js"></script>
Agregue anclas con nombres únicos a las secciones de su página.
<div class="section-1"> <a name="1"></a> ... </div> <div class="section-2"> <a name="2"></a> ... </div> <div class="section-3"> <a name="3"></a> ... </div>
Cree una lista HTML y añada la clase CSS ' Anchor-JS ' a los elementos Li . A continuación, inserte enlaces apuntando a las secciones de página especificadas en la lista HTML.
<ul> <li class="anchor-js"><a href="#1">First</a></li> <li class="anchor-js"><a href="#2">Second</a></li> <li class="anchor-js"><a href="#3">Third</a></li> </ul>
Inicializar el pfSmoothScroll cuando DOM cargado.
document.addEventListener('DOMContentLoaded', function() {
var smoothAnchor = new SmoothAnchor();
}); Cambie la duración predeterminada del desplazamiento.
new SmoothAnchor({
duration : 500
}); Cambie la aceleración predeterminada del desplazamiento.
new SmoothAnchor({
easing : "linear"
});
