J'ai une grande table avec une barre de défilement verticale. Je voudrais faire défiler jusqu'à une ligne spécifique dans ce tableau en utilisant jQuery / Javascript.

Existe-t-il des méthodes intégrées pour ce 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>

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 pourscrollTop .

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

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

Nous sélectionnons à la fois html et body car le scroller de document peut être sur l'un ou l'autre et il est difficile de déterminer lequel. Pour les navigateurs modernes, vous pouvez vous en sortir $(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)

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

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

J'ai réussi à le faire moi-même. Pas besoin de plugins. Découvrez mon essentiel :

// 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);
});

Vous pouvez utiliser la scrollIntoView()méthode en javascript. juste donnerid.scrollIntoView();

Par exemple

row_5.scrollIntoView();

Vous pouvez utiliser le plugin jQuery scrollTo plugin:

$('div').scrollTo('#row_8');

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;
}

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

Vous pouvez faire défiler par jQuery et JavaScript Juste besoin de deux éléments jQuery et 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>

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
        );
    });

Je ne sais pas pourquoi personne ne dit l'évidence, car il existe une scrollTofonction javascript intégrée:

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

Référence .

Contrairement à ce que la plupart des gens ici sont ce qui suggère, je vous recommande de faire utiliser un plug - in si vous voulez animer le mouvement. Il ne suffit pas d'animer scrollTop pour une expérience utilisateur fluide. Voir ma réponse ici pour le raisonnement.

J'ai essayé un certain nombre de plugins au fil des ans, mais j'ai fini par en écrire un moi-même. Vous voudrez peut-être lui donner un spin: jQuery.scrollable . En utilisant cela, l'action de défilement devient

$container.scrollTo( targetPosition );

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

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

fonctionne principalement mais n'est pas entièrement correct. Il ne gère pas correctement la bordure du conteneur de défilement. L'élément cible est défilé trop 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, regardez la démo pour la voir en action.

Pour une fonction qui renvoie la position cible et fonctionne à la fois pour les conteneurs de défilement fenêtre et non-fenêtre, n'hésitez pas à utiliser cet élément essentiel . 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é . Vous n'avez cependant pas besoin d'un plugin si vous souhaitez accéder à la cible sans transition. Voir la réponse de @James pour cela, mais assurez-vous de calculer correctement la position cible s'il y a une bordure autour du conteneur.

Pour ce que ça vaut, c'est comme ça que j'ai réussi à réaliser un tel comportement pour un élément général qui peut être à l'intérieur d'un DIV avec défilement (sans connaître le container)

Il crée une fausse entrée de la hauteur de l'élément cible, puis y met l'accent, et le navigateur se charge du reste, quelle que soit la profondeur de la hiérarchie déroulante. 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();

J'ai fait cette combinaison. son travail pour moi. mais face à un problème si le clic clique sur cette taille de div est trop grande pour que scenerio défile pas vers le bas pour cette div particulière.

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

        }