Navegación lateral para la aplicación Web de desplazamiento de una página-puntos de desplazamiento fáciles

Vista prévia

Descripción

El plugin de JavaScript fácil de puntos de desplazamiento genera automáticamente la navegación lateral que indica la posición de desplazamiento actual y se desplaza suavemente a través de secciones de página al hacer clic en las viñetas.

Funcionamiento

Incluya los archivos JavaScript y CSS de los puntos de desplazamiento fáciles en la página.

<link href="dist/easyScrollDots.css" rel="stylesheet">
<script src="dist/easyScrollDots.js"></script>

Agregue el siguiente código HTML al principio de cada sección requerida. Asegúrese de agregar un identificador único para cada instancia, también actualice Data-scroll-indicador-title .

<div>

<div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
</div>
<div>

<h1>First Section</h1>
</div>

<div>

<div class="scroll-indicator" id="section02" data-scroll-indicator-title="Second Section"></div>
</div>
<div>

<h1>Second Section</h1>
</div>

<div>

<div class="scroll-indicator" id="section03" data-scroll-indicator-title="Last Section"></div>
</div>
<div>

<h1>Last Section</h1>
</div>

Inicializa el plugin Easy Scroll DOTS con los siguientes parámetros:

easyScrollDots({


// sets to true if you have a fixed navigation

'fixedNav': false,


// unique ID of your fixed navigation

'fixedNavId': '',


// set to true if your navigation is only sticky when scrolling up

'fixedNavUpward': false

});