imagenes - Marque el desplazamiento con CSS

marquee html5

Question

Intento crear un botón "100% CSS" puro (sin jQuery) "Back to Top" pero me gustaría que el botón se muestre solo si el visitante se desplaza hacia abajo en la página.

¿Es posible verificar eso con CSS de alguna manera? Entonces, si el visitante se desplazó un poco hacia abajo, mostrará el botón "Volver arriba".

¡Gracias!

Answer 1

Determinar por ubicación del cursor

Una forma de hacerlo sería mostrar solo el elemento .toTop cuando el usuario pase sobre el contenido de la página, muy por debajo del encabezado y los enlaces de navegación:

.toTop { opacity: 0; }
.toTop:hover, main:hover + .toTop { opacity: 1; }

Puedes ver el efecto aquí: http://jsfiddle.net/GFfbe/1/

O, lentamente, destapalo

Alternativamente, podría descubrir lentamente el enlace .toTop con otro elemento. En el ejemplo siguiente, uso el pseudo elemento ::before del cuerpo ::before para cubrir el elemento .toTop y lo .toTop lentamente a medida que el usuario se desplaza:

/* .toTop will appear in the left margin */
body {
    margin: 0 10em;
}

/* Positioned and sized to overlap .toTop */
body::before {
    content: "";
    background: white;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 5em;
}

/* Positioned, so body::before goes behind it */
main {
    position: relative;
}

/* Attached to viewport at bottom left */
.toTop {
    z-index: -1;
    position: fixed;
    bottom: 1em; left: 1em;
}

Puedes ver este efecto aquí: http://jsfiddle.net/GFfbe/2/