Aller à l'intérieur du contenu d'un div scrollable

Question

J'obtenu le code HTML suivant:

<div style="height:200px;overflow-y:scroll;">
  <table>.....</table>
</div>

Avec cette configuration, je suis un peu mimant le contrôle <select> élargi avec @size attribut défini. Ainsi, un utilisateur peut sélectionner une ligne dans le tableau. Est-il possible, de faire la table « sauter », de sorte que la ligne sélectionnée semble être au sommet de la div et la barre de défilement verticale à sa position défiler. Je ne ai pas besoin de l'effet de défilement réel. Le tableau devrait changer la position de tout de suite sur la ligne clic.

Answer 1

Ce travail pourrait:

$("#scrollableDiv").animate({
  scrollTop: 200 // scrolls to the bottom
}, 1000);

Answer 2

Je suggère d'utiliser scrollTop (ou animer même si vous voulez).

$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.

http://jsfiddle.net/8mepH/

Answer 3

Voici un extrait modifié du code utilisé dans: http://www.balupton.com/sandbox/jquery-scrollto/demo/

Pour faire ce que vous voulez:

            // Fetch the scrollable div
            $container = $('#scrollable');
            // Fetch the target div
            $target = $('#target');

            // Prepare the Inline Element of the Container
            var $inline = $('<span/>').css({
                'position': 'absolute',
                'top': '0px',
                'left': '0px'
            });
            var position = $container.css('position');

            // Insert the Inline Element of the Container
            $container.css('position','relative');
            $inline.appendTo($container);

            // Determine the Offsets
            var startOffset = $inline.offset().top,
                targetOffset = $target.offset().top,
                offsetDifference = targetOffset - startOffset;

            // Perform the jump
            $container.css('scrollTop',offsetDifference+'px')

Nous ajoutons une ligne ici pour nous assurer d'obtenir la position de départ correcte dans la zone défilante. Nous utilisons une différence de décalage, donc si vous voulez faire des animations, il animations à partir de la position de départ, plutôt que de sauter un autre endroit.