web-dev-qa-db-fra.com

Définir une position de la barre de défilement

J'ai une table à l'intérieur d'une div (c'est un débordement, donc le navigateur affiche une barre de défilement). À l'aide de JavaScript, comment déplacer la poignée de la barre de défilement le long de la piste vers une position correspondant à l'emplacement d'une ligne du tableau?

+--------------------------------------+
|100                               |   |
|101                               |   |
|102                               |   |
|103                               |   |
|104                               |   |
|105     This is a table that      |---|
|106        has overflowed.        | - |  <-- I want to move this using JavaScript,
|107                               |---|      so that a specific row # is visible.
|108                               |   |
|109                               |   |
|110                               |   |
|111                               |   |
+--------------------------------------+
javascriptscrollbar
34
Scrollbar

Si vous voulez utiliser la méthode non - jQuery , utilisez la propriété scrollTop de la table contenante .

Supposons que vous puissiez facilement identifier la ligne que vous voulez faire défiler en utilisant un ID, avec le <div /> contenant. Utilisez le offsetTop de l'élément que vous voulez faire défiler.

var container = document.getElementById('myContainingDiv');
var rowToScrollTo = document.getElementById('myRow');

container.scrollTop = rowToScrollTo.offsetTop;
50
Dan Herbert

Utilisation de JQuery:

'.scroll-table' est le nom de la classe utilisé pour la partie pouvant défiler

1.Aller à la position initiale

$('.scroll-table').scrollTop(0);

2.La ligne inférieure calcule la différence de défilement entre la position supérieure des tableaux et la ligne sur laquelle nous avons défilé.

$('.scroll-table').scrollTop($('#myrowid').position().top-$('.scroll-table').position().top);
1
Aravind T

Vous pouvez utiliser ceci: 

$('a').on('click', function(e){
  var t = this.id.substring(1);
  e.preventDefault();
  var target= $(".section")[t] ;
  var offset = $( target ).offset();
  $('html, body').stop().animate({
    scrollTop: offset.top
  }, 1000);
});

Vous pouvez aussi vérifier ceci exemple sur jsfiddle .

1
Hessam Nadr

Si vous êtes intéressé par jQuery ici, vous pouvez le faire comme suit:

$(".tableClass tbody").scrollTop(0);
1
Nuno Ribeiro

Vous pouvez également utiliser la méthode .scrollTop() jQuery:

https://api.jquery.com/scrollTop/

0
Santiago Rebella

Il existe une solution utilisant AngularJs.

  $document.scrollTopAnimated(50, 1000).then(function () {});

Le premier paramètre est la position. La seconde est la durée de l'animation.

0
Gustavo Lage