0

Buenas tengo un sistema que tiene un icono para ir para arriba, como podría hacer que eso suceda intente con un ejemplo de que es siguiente pero no me resulto, como lo podría hacer con un icono imagen referencial: https://ibb.co/gtrLTZT

<script>
    let btn = document.querySelector("button")

    btn.addEventListener("click", function() {
      window.scrollTo(0, 0)
    })
  </script>
<style>
        html {
          scroll-behavior: smooth;
        }
      </style>
<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        html {
          scroll-behavior: smooth;
        }
      </style>
    </head>
    <body>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</div>
      <button>Ir arriba</button>
    <script>
  
    </script>
    </script>
    </body>
    </html>

2
  • Espero le pueda ayudar a alguien: <li><a href="#" id="irarriba">Ir arriba</a></li> <script type="text/javascript"> $(document).ready(function() { $('#irarriba').click(function(){ //Id del elemento cliqueable $('html, body').animate({scrollTop:0}, 1250); return false; }); }); </script>
    – luiss
    el 25 mar. 2022 a las 21:09
  • Coloca el código que te funcionó como respuesta y no como comentario. Despues acepta tu propia pregunta para evitar confusiones el 26 mar. 2022 a las 0:12

1 respuesta 1

1

Si en vez de un botton pones un enlace a con href='#' (el # va hacia el principio de la página) será suficiente, ni siquiera tendrás que usar javascript

html {
   scroll-behavior: smooth;
}
p {
    padding: 30px;
}
a {
    padding: 20px;
    background: blue;
    color: white;
    text-decoration: none;
}
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quod eius, nemo recusandae soluta veniam quas dolorem, error, molestiae explicabo culpa voluptatem ipsa quos tempora unde? Saepe magnam aut corporis!</p>
      
      
      <a href='#'>Ir arriba</a>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.