web-dev-qa-db-fra.com

Comment faire défiler jusqu'à un élément spécifique en utilisant jQuery?

J'ai une grande table avec barre de défilement verticale. J'aimerais faire défiler une ligne spécifique de ce tableau à l'aide de jQuery/Javascript.

Existe-t-il des méthodes intégrées pour le faire?

Voici un petit exemple pour jouer avec.

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}
<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>
javascriptjqueryscroll
242
Misha Moroshko

Mort simple. Aucun plugin nécessaire .

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

Voici un exemple de travail .

Documentation pour scrollTop .

540
James

Je me rends compte que cela ne répond pas au défilement dans un conteneur mais les gens le trouvent utile alors:

$('html,body').animate({scrollTop: some_element.offset().top});

Nous sélectionnons à la fois html et body, car le sélecteur de document pourrait être sur l'un ou l'autre et il est difficile de déterminer lequel. Pour les navigateurs modernes, vous pouvez vous en sortir avec $(document.body).

Ou, pour aller en haut de la page:

$('html,body').animate({scrollTop: 0});

Ou sans animation:

$(window).scrollTop(some_element.offset().top);

OU...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
111
Dominic

Je suis d'accord avec Kevin et d'autres, utiliser un plugin pour cela est inutile.

window.scrollTo(0, $("#element").offset().top);
28
Fredrik Stolpe

Le meilleur plugin que j'ai trouvé était this Gist .

Ce n'est pas un plugin à proprement parler, mais il fait le travail de l'un et il a résolu mes problèmes. Malheureusement, cela ne fonctionne que dans FireFox. Aucune idée pourquoi chrome ne l'aime pas/ne veut pas l'exécuter.

EDIT: En attendant, j'ai réussi à le faire moi-même. Pas besoin de plugins. Regarde mes Gist :

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});
8
lorddarq

J'ai toujours trouvé que le plugin jQuery scrollTo était très utile pour cela. Jouez avec les démos pour voir si c'est pour vous.

3
nickf

Vous pouvez utiliser la méthode scrollIntoView() en javascript. il suffit de donner id.scrollIntoView();

Par exemple

row_5.scrollIntoView();
3
Tamilarasi

Vous pouvez faire défiler par jQuery et JavaScript Juste besoin de deux éléments jQuery et de ce code JavaScript:

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});
#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>
1
MD Ashik

Faire défiler l'élément jusqu'au centre du conteneur

Amener l'élément au centre du conteneur.

DEMO sur CODEPEN

JS

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

HTML

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

css

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

Ce n'est pas exact au centre mais vous ne le reconnaîtrez pas sur des éléments plus gros et plus gros.

1
basti500

Pas sûr pourquoi personne ne dit l'évident, car il y a une fonction javascript scrollTo intégrée:

scrollTo( $('#element').position().top );

référence .

1
Kevin

J'ai fait une combinaison de ce que d'autres ont posté. C'est simple et lisse

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });
1
Nlinscott

Contrairement à ce que la plupart des gens suggèrent, je vous recommanderais de utiliser un plugin si vous souhaitez animer le déplacement. Simplement animer scrollTop ne suffit pas pour une expérience utilisateur fluide. Voir ma réponse ici pour le raisonnement.

J'ai essayé plusieurs plugins au fil des ans, mais j'en ai finalement écrit un moi-même. Vous voudrez peut-être essayer: jQuery.scrollable . En utilisant cela, l'action de défilement devient

$container.scrollTo( targetPosition );

Mais ce n'est pas tout. Nous devons également corriger la position cible. Le calcul que vous voyez dans d'autres réponses,

$target.offset().top - $container.offset().top + $container.scrollTop()

principalement fonctionne mais n'est pas tout à fait correct. Il ne gère pas correctement la bordure du conteneur de défilement. L'élément cible défile trop vers le haut, de la taille de la bordure. Voici une démo.

Par conséquent, une meilleure façon de calculer la position cible est

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

Encore une fois, jetez un oeil à la démo pour le voir en action.

Pour une fonction qui retourne la position cible et fonctionne pour les conteneurs de défilement avec et sans fenêtre, n'hésitez pas à utiliser this Gist . Les commentaires qui y figurent expliquent comment la position est calculée.

Au début, j'ai dit qu'il serait préférable d'utiliser un plugin pour le défilement animé . Cependant, vous n'avez pas besoin d'un plugin si vous souhaitez atteindre la cible sans transition. Voir le réponse de @James pour cela, mais assurez-vous de calculer correctement la position cible s'il existe une bordure autour du conteneur.

1
hashchange

Pour ce que cela vaut, c’est ainsi que j’ai réussi à obtenir un tel comportement pour un élément général qui peut être à l’intérieur d’une DIV avec défilement (sans connaître le conteneur)

Il crée une fausse entrée de la hauteur de l'élément cible, puis le met en évidence, et le navigateur se préoccupe du reste, quelle que soit la profondeur de votre hiérarchie. Fonctionne comme un charme.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
0
martinh_kentico

J'ai fait cette combinaison. son travail pour moi. mais face à un problème si vous déplacez, cette taille de div est trop grande pour que scenerio ne défile pas jusqu'à cette div en particulier.

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }
0
scode2704