Плавная прокрутка в строке внутри прокручиваемого стола

Question

Плавная прокрутка в строке внутри прокручиваемого стола

0

Я пытаюсь реализовать каталог продуктов. Все продукты должны быть перечислены в таблице с включенным переполнением. Мне нужен способ реализации гладкой прокрутки к определенным строкам в прокручиваемой таблице. Здесь скрипка http://jsfiddle.net/PHTsd/

Только одно ограничение здесь - страница не должна прокручиваться: только таблица должна прокручиваться

Я пробовал несколько методов, таких как: Chris Coyer Smooth scroll

$(function() {   $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }   }); });

заменив $('html,body') на $('table') но безрезультатно.

Я что-то упускаю? Есть ли плагин, который уже реализует это?

Любая помощь будет оценена по достоинству. Благодарю.

Niaz Mohammed 31 дек. 2013, в 07:50

Источник

Теги:

jquery

html

table

1 ответ

Ещё вопросы

dudewad · Accepted Answer · 2013-12-31T04-58-00.000Z

К сожалению, вы добавили переполнение: auto и высоту в тег tbody. Попробуйте использовать scrollTop() для этого вместо таблицы. Я бы сказал, сделайте одно из следующего:

Если вы хотите прокрутить текст, тогда укажите, что вместо таблицы itself-, другими словами, выше вы сказали, что вы заменили $ ("html, body") на $ ("table"); вместо этого вы замените:

$("tbody");

Если вы не планируете иметь панель заголовка таблицы, то нацелитесь на таблицу непосредственно, а не на тело, но вам нужно настроить свой CSS, чтобы установить свойство переполнения: auto вместо таблицы.

Попробуйте это в консоли, вы увидите, что он работает нормально:

$("tbody").scrollTop(50);

Вы можете заменить 50 на что-нибудь, чтобы увидеть эффект, который он имеет. Вероятно, вам все равно придется поиграть с ним, но это должно заставить вас идти в правильном направлении.

Если вам нужно больше разъяснений, дайте мне знать, и я помогу.

Еще один thing- дает вашей таблице идентификатор или класс и нацелен на то, что:

<table id="someTable">
    <tbody>.....</tbody>
</table>

$("#someTable tbody").scrollTop(50);

Это гораздо более безопасный способ сделать что-то!

Это работает как шарм! Этот издавал меня несколько дней. Спасибо за быстрый и четкий ответ. Я делаю справочные таблицы по идентификаторам, но спасибо за повторение этого тоже :) Кроме того, обратный вызов прекрасно работает с scrollTop. У меня сейчас хороший плавный скроллинг. Еще раз спасибо и счастливого нового года!