0
207
Vistas¿Cómo se desplazará la página a la siguiente sección si se hace clic en la flecha?
Quiero que cuando haga clic en la flecha, el sitio web se desplace hacia abajo a la siguiente sección, llamada descanso en mi código. Entonces se moverá 100vh . No sé cómo debo hacer esto, creo que debe haber algo de JS. Alguien sabe como puedo conseguir lo que quiero? Vea la imagen a continuación, para que quede claro. ¡Gracias por adelantado!
HTML:
<html> <head> <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0"> <title>Korps Commandotroepen</title> <link rel="stylesheet" href="style5.css"> </head> <body> <div class="bg"> <button class="button"> <div class="button__arrow button__arrow--down"></div> </button> </div> <div class="rest"> </div> </body> </html>CSS:
.bg{ width: 100%; height: 100vh; background-color: black; } .button { border-radius: 20px; padding: 8px; position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); position: fixed; bottom:8%; } .button__arrow { background-color: transparent; height: 12px; width: 12px; } .button__arrow--down { border-bottom: 3px solid rgba(0, 0, 0, 0.3); border-right: 3px solid rgba(0, 0, 0, 0.3); transform: translateY(-25%) rotate(45deg); } .rest{ width: 100%; height: 100vh; background-color: aliceblue; }Imagen:
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Creo que puede hacerlo simplemente colocando la flecha en la etiqueta y en href dando la identificación del resto.
CSS: .bg{ width: 100%; height: 100vh; background-color: black; } .button { border-radius: 20px; padding: 8px; position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); position: fixed; bottom:8%; } .button__arrow { background-color: transparent; height: 12px; width: 12px; } .button__arrow--down { border-bottom: 3px solid rgba(0, 0, 0, 0.3); border-right: 3px solid rgba(0, 0, 0, 0.3); transform: translateY(-25%) rotate(45deg); } .rest{ width: 100%; height: 100vh; background-color: aliceblue; } <html> <head> <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0"> <title>Korps Commandotroepen</title> <link rel="stylesheet" href="style5.css"> </head> <body> <div class="bg"> <button class="button"> <a href="#rest"><div class="button__arrow button__arrow--down"></div></a> </button> </div> <div class="rest" id="rest"> </div> </body> </html> <!-- begin snippet: js hide: false console: true babel: false -->
·
Juan Pablo Isaza
Denunciar
0
Enfoque simple usando scroll-behavior: smooth; y a etiqueta en lugar de un button .
window.onscroll = function () { var height = $(window).height(); var scrollTop = $(window).scrollTop(); var obj = $('#scroll'); var pos = obj.position(); if (height + scrollTop < pos.top) { $('.button').fadeIn(); } else { $('.button').fadeOut(); } } html { scroll-behavior: smooth; } .bg { width: 100%; height: 100vh; background-color: black; } .button { border-radius: 20px; padding: 8px; position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); position: fixed; bottom: 8%; background: #ccc; } .button__arrow { background-color: transparent; height: 12px; width: 12px; } .button__arrow--down { border-bottom: 3px solid rgba(0, 0, 0, 0.3); border-right: 3px solid rgba(0, 0, 0, 0.3); transform: translateY(-25%) rotate(45deg); } .rest { width: 100%; height: 100vh; background-color: aliceblue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0"> <title>Korps Commandotroepen</title> <link rel="stylesheet" href="style5.css"> </head> <body> <div class="bg"> <a href="#scroll" class="button"> <div class="button__arrow button__arrow--down"></div> </a> </div> <div id="scroll" class="rest"></div> </body> </html>
·
Juan Pablo Isaza
Denunciar
0
<html> <head> <meta name="viewport" content="width=Ddevice-width, initial- scale=1.0"> <title>Korps Commandotroepen</title> <link rel="stylesheet" href="style5.css"> </head> <body> <div class="bg"> <button class="button"> <div class="button__arrow button__arrow--down" id="button__arrow button__arrow--down" onClick="topFunction()"></div> </button> </div> <div class="rest"> </div> <script> var mybutton = document.getElementById("button__arrow button__arrow-- down"); var close = document.getElementsByClassName("button")[0]; function topFunction() { document.body.scrollTop = 1000; document.documentElement.scrollTop = 1000; } var close = document.getElementsByClassName("button")[0]; close.onclick = function() { close .style.display = "none"; } </script> <style> .bg{ width: 100%; height: 100vh; background-color: black; } .button { border-radius: 20px; padding: 8px; position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); position: fixed; bottom:8%; } .button__arrow { background-color: transparent; height: 12px; width: 12px; } .button__arrow--down { border-bottom: 3px solid rgba(0, 0, 0, 0.3); border-right: 3px solid rgba(0, 0, 0, 0.3); transform: translateY(-25%) rotate(45deg); } .rest{ width: 100%; height: 100vh; background-color: aliceblue; } </style> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta