القفز إلى المحتوى داخل Div قابل للتمرير

Question

حصلت على HTML التالية:

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

مع هذا الإعداد ، أقوم بتقليد إلى حد ما <select> تحكم مع السمة size المحددة. لذلك ، يمكن للمستخدم تحديد صف في الجدول. هل هناك طريقة ، لجعل الجدول "قفز" ، بحيث يبدو أن الصف المحدد في الجزء العلوي من Div وتمرير شريط التمرير العمودي إلى موقعه. لا أحتاج إلى تأثير التمرير الفعلي. يجب أن يغير الجدول موقعه على الفور عند نقرة الصف.

Answer 1

هذا قد يعمل:

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

Answer 2

أقترح استخدام Scrolltop (أو حتى تحريكه إذا أردت).

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

http://jsfiddle.net/8meph/

Answer 3

فيما يلي مقتطف معدّل من الكود المستخدم في:http://www.balupton.com/sandbox/jquery-scrollto/demo/

لفعل ما تريد:

            // 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')

نضيف هنا لضمان حصولنا على موضع البداية الصحيح داخل منطقة التمرير. نستخدم فرق الإزاحة ، لذا إذا كنت ترغب في القيام بالرسوم المتحركة ، فإن الرسوم المتحركة من موضع البداية ، بدلاً من القفز في مكان آخر.