Código de CSS - Ejemplo del comportamiento de desplazamiento del scroll con scroll-behavior

Imágen de perfil
Val: 474
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo del comportamiento de desplazamiento del scroll con scroll-behaviorgráfica de visualizaciones


CSS

Publicado el 20 de Febrero del 2021 por Katas (45 códigos)
450 visualizaciones desde el 20 de Febrero del 2021
Este código muestra el uso del tag CSS scroll-behavior para mostrar el desplazamiento suave y progresivo entre varios puntos (anchors) de una pagina web.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

efecto-comportamiento-css-scroll-behavior

1

Publicado el 20 de Febrero del 2021gráfica de visualizaciones de la versión: 1
451 visualizaciones desde el 20 de Febrero del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    body {padding:20px}
 
    html {
        scroll-behavior: smooth;
    }
 
    .arrowDown, .arrowUp {
        position: relative;
        display:block;
        width:26px;
        height:26px;
        border-radius: 5px;
        background-color: rgb(65, 65, 65);
    }
    .arrowDown::before {
        content:"";
        position: absolute;
        top:7px;
        left:5px;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:14px solid white;
    }
    .arrowUp::before {
        content:"";
        position: absolute;
        top:7px;
        left:5px;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-bottom:14px solid white;
    }
 
    p {width: 100px;}
    </style>
</head>
<body id="inicio">
 
    <a href="#fin"><span class="arrowDown"></span></a>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor ligula nec velit pellentesque vestibulum. Suspendisse sed risus nec lectus tincidunt gravida. Integer a lacus ultrices, facilisis est vitae, dignissim arcu. Nam porttitor enim eu velit iaculis accumsan. Praesent in neque non justo imperdiet sagittis in nec justo. Integer est velit, convallis sit amet ante eu, posuere sagittis lectus. Fusce eu vulputate est. Pellentesque sollicitudin eros ac libero sodales, nec eleifend lorem tempus. Phasellus et fringilla sem, nec molestie risus. Curabitur et blandit enim. Donec eget lacinia libero. Proin non ornare justo. Fusce posuere est nec massa pharetra, a iaculis risus lobortis. Sed facilisis facilisis egestas.</p>
 
    <p>Mauris vel mauris malesuada, rhoncus libero laoreet, blandit sem. Vestibulum in nulla lacinia, sagittis felis sit amet, cursus quam. Suspendisse in bibendum magna. Maecenas laoreet sed augue nec aliquet. Suspendisse et maximus nisi. Aliquam lacinia nisi ac metus tristique, a tempor purus imperdiet. Donec vitae nunc rutrum sem eleifend tempor. In nec nunc eget ligula rutrum vehicula sit amet id massa. Curabitur sed turpis tellus. Nulla egestas sapien vel lacus interdum, ut pellentesque elit fringilla. Phasellus finibus posuere ligula. Morbi aliquet ex urna. Etiam et massa faucibus, sagittis sem id, lacinia neque.</p>
 
    <p>In turpis odio, consectetur sed commodo cursus, sollicitudin eu enim. In sollicitudin eget lectus at consequat. Sed ut leo nisi. Mauris vel lacus pharetra, vulputate magna non, consectetur elit. Donec ipsum felis, mattis in imperdiet in, maximus in magna. Donec blandit pretium nisl et placerat. Integer luctus, tellus eget cursus euismod, libero purus auctor est, ac iaculis est nulla a velit. Aenean faucibus non tortor sit amet congue. Fusce porta nibh justo, malesuada cursus leo finibus eu. Duis ullamcorper nisl non augue blandit, at ullamcorper dolor interdum. Proin quis erat blandit, faucibus velit nec, feugiat nisi. Fusce nibh leo, consequat et magna eu, tincidunt congue turpis. Ut sit amet massa ex. Praesent vitae hendrerit eros. Duis justo ante, eleifend et leo ut, pellentesque congue massa.</p>
 
    <p>Aenean ipsum nisl, dictum ac facilisis non, luctus sit amet sapien. Donec nibh elit, eleifend ut posuere vitae, feugiat consectetur erat. Duis euismod rhoncus bibendum. In hac habitasse platea dictumst. Suspendisse cursus porttitor faucibus. Quisque elit neque, congue malesuada nulla at, maximus eleifend metus. Mauris tincidunt odio et purus luctus varius. Praesent quis mattis turpis, eu rutrum orci. Phasellus in mauris lobortis, auctor massa vel, dictum erat. Phasellus nec orci congue, lacinia orci id, fringilla elit. Proin dignissim mattis varius.</p>
 
    <p>Fusce lectus nunc, vehicula a laoreet a, ullamcorper in nunc. Pellentesque quis facilisis nibh. Suspendisse dignissim, lacus eu faucibus pulvinar, lacus dolor sodales augue, ut iaculis est erat eu ipsum. Ut gravida vehicula enim porttitor porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dictum nisi laoreet urna dictum porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam consectetur sollicitudin enim in aliquet. Curabitur pellentesque quam nisi.</p>
 
    <a href="#inicio"><span class='arrowUp'></span></a>
    <span id="fin"></span>
</body>
</html>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6900