javascript - removeattribute - jQuery saltar o desplazarse a cierta posición, div u objetivo en la página desde el botón onclick

removeattr style jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• jQuery scroll to element 24 respuestas

Cuando hago clic en un botón, quiero poder saltar hacia abajo o desplazarme hacia un div u objetivo específico en la página.

$(''#clickMe'').click(function() {
    //jump to certain position or div or #target on the page
});

¿Cómo puedo hacer esto?

Answer 1

Me gustaría darle un estilo a un enlace para que parezca un botón, porque de esa manera hay una reserva de no js.

Entonces, así es como puedes animar el salto usando jquery. No-js es un salto normal sin animación.

Ejemplo original:

jsfiddle

$(document).ready(function() {
  $(".jumper").on("click", function( e ) {

    e.preventDefault();

    $("body, html").animate({ 
      scrollTop: $( $(this).attr(''href'') ).offset().top 
    }, 600);

  });
});

#long {
  height: 500px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Links that trigger the jumping -->
<a class="jumper" href="#pliip">Pliip</a>
<a class="jumper" href="#ploop">Ploop</a>
<div id="long">...</div>
<!-- Landing elements -->
<div id="pliip">pliip</div>
<div id="ploop">ploop</div>

Nuevo ejemplo con estilos de botones reales para los enlaces, solo para demostrar un punto.

Todo es esencialmente lo mismo, excepto que cambié la clase .jumper por .button y agregué css styling para hacer que los enlaces parezcan botones.

Ejemplo de estilos de botón

Answer 2

$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used