jQuery - пользовательские кнопки прокрутки страницы: неправильно .offset (). Top - PullRequest
Новая
       3

jQuery - пользовательские кнопки прокрутки страницы: неправильно .offset (). Top

0 голосов
/ 11 марта 2020

Я пытаюсь создать несколько кнопок для прокрутки к верхней и нижней части действительно длинной таблицы, но в многократно используемой функции.

Это модификация ответа на этот вопрос который объясняет, как сделать прокрутку вверх / прокрутить до нижнего инструмента

Код, который я написал, выглядит следующим образом: 

//show the buttons
var ubScrollButtons = function(table) {
 //get the number of rows to determine if the buttons should show
    var rows = $(table + ' >tbody >tr').length;

 //get the element marking the top of the table
    var tableTop = $('#tableTop');

//get the element marking the bottom of the table (the table has a footer so we don't want to use the actual bottom of the table)
    var tableBottom = $('#tableBottom'); 

    var tableTopOffset = tableTop.offset().top;
    var btnToTop = $('#btnToTop');
    var btnToBottom $('#btnToBottom');

    $('window').scroll(function() {
        var scrollIndex = $(this).scrollTop();

        if(rows > 25 && scrollIndex > top + 1000) {
            btnToTop.on('click', function(e) {
                e.preventDefault();
                scrollToEl(tableTop, 500);
                $(this).fadeOut(900);
            };

            btnToTop.show();
        } else {
            btnToTop.hide():
        }

        if(rows > 50 && scrollIndex > top + 500) {
            btnToBottom.on('click', function(e) {
                e.preventDefault();
                scrollToEl(tableBottom, 500);
                $(this).fadeOut(900);
            };

            btnToBottom.show();
        } else {
            btnToBottom.hide():
        }
    }

    var scrollToEl = function(el, speed) {
        var top = el.offset().top;
        $('html, body').stop().animate({scrollTop: top}, speed);
    }

}

Отображение и скрытие кнопок работают как задумано, например

  • при прокрутке вниз на определенную величину появляется кнопка «прокрутка вниз»
  • при прокрутке далее появляется кнопка «прокрутка вверх»)
  • при прокрутке к началу они оба исчезают

однако при нажатии на кнопки они не прокручиваются вверх или вниз (затухание работает, поэтому я знаю, что нажатие кнопки работает). Я попытался отладить его, и консоль зарегистрировала, что значение scrollIndex в ubScrollButtons() и значение top в scrollToEl() функции были одинаковыми, что меня совершенно озадачило.

Я не уверен, почему они были бы одинаковыми, поскольку значение scrollIndex получено из окна, а значение top - от элемента, переданного в функцию.

Я проверил скрипт (который около 13 тысяч строк кода), и ни одно из имен переменных не используется повторно, так что я не думаю, что это так. Если бы кто-нибудь мог помочь мне выяснить, почему он получает тот же номер после прокрутки, я был бы очень признателен за это

ETA

Согласно этой записи значение offset (). top может меняться при изменении расстояния от верхней части документа, поэтому было бы лучше использовать scrollTop () вместо offset (). top; однако, это не дало желаемого эффекта, и кнопка «вниз» также прокрутилась вверх

...