Biblioteca de JavaScript puro para el sitio web de desplazamiento de una página-scrollIt. js

Vista prévia

Descripción

scrollIt. js es una biblioteca de JavaScript pura para generar una barra lateral de navegación que le permite navegar a través de contenido seccionado con efectos de desplazamiento vertical suave.

Funcionamiento

Descargue e importe el script scrollIt. js al final de su página web.

<script src="pageScroll.js"></script>

Cree secciones de contenido con atributo de página de datos que define los nombres de las etiquetas de anclaje.

<section data-page="section-1"></section>
<section data-page="section-2"></section>
<section data-page="section-3"></section>
<section data-page="section-4"></section>
<section data-page="section-5"></section>

El CSS requerido para hacer que cada contenido Deslice la ventana completa.

section[data-page] {

height: 100%;

width: 100%;

display: block;

position: relative;
}

El scrollIt. js generará automáticamente una barra lateral de navegación en la pantalla. Puede personalizar la navegación utilizando CSS de la siguiente manera:

nav.ctrlPage,
nav.ctrlPage div {

border: 2px solid black;

border-radius: 5px;

transition: background 0.3s linear;

cursor: pointer;
}

nav.ctrlPage {

position: fixed;

right: 1%;

width: 25px;

z-index: 9999;

top: 0;

bottom: 0;

margin: auto;
}

nav.ctrlPage div {

box-sizing: border-box;

margin: 15% auto;

width: 20px;

height: 20px;

background: white;
}

nav.ctrlPage div.active { background: black; }