web-dev-qa-db-fra.com

jQuery sauter ou faire défiler jusqu'à la position, div ou cible sur la page à partir du bouton onclick

Lorsque je clique sur un bouton, je veux pouvoir sauter ou faire défiler jusqu'à une div ou une cible spécifique sur la page.

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

Comment puis-je faire ceci?

javascriptjqueryhtmlcssscroll
35
John

Je voudrais styler un lien pour qu'il ressemble à un bouton, car de cette façon, il y a un repli sans jS.

Voici comment vous pourriez animer le saut en utilisant jQuery. No-js fallback est un saut normal sans animation.

Exemple 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>

Nouvel exemple avec les styles de boutons réels pour les liens, juste pour prouver un point.

Tout est essentiellement pareil, sauf que j'ai changé de classe .jumper à .button et j’ai ajouté le style CSS pour que les liens ressemblent à des boutons.

Button styles example

45
Joonas
$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used
34
Muhammad Talha Akbar