Доработать функцию?

Question

[Max]

Здравствуйте, помогите разобраться раз и навсегда)
Есть функция. При скроле появляется кнопка "На верх". Как сделать, что-бы при скроле уже снизу наверх эта кнопка пропадала. То есть сверху вниз - есть. Снизу в вверх - нет.

// Кнопка на верх
var top_show = 500; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
var delay = 1000; // Задержка прокрутки
$(document).ready(function() {
$(window).scroll(function () { // При прокрутке попадаем в эту функцию
/* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */
if ($(this).scrollTop() > top_show) $('#back').css("display","block");
if ($(this).scrollTop() > top_show) $('#show').fadeIn();
});
if ($(this).scrollTop() < top_show) $('#back').fadeOut();
$('#back').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию
/* Плавная прокрутка наверх */
$('body, html').animate({
scrollTop: 0
}, delay);
});
});
});

jsfiddle.net/ukyjL2s6

Comments

[Сергей Сергей]

запоминать предыдущее значение scrollTop, сравнивать с текущим. Все просто.

[Max]

Сергей Сергей: так и делаю - if ($(this).scrollTop() < top_show) $('#back').css("display","none"); Но не работает

[Max]

jsfiddle.net/ukyjL2s6

[Сергей Сергей]

Max: у Вас идет проверка текущего значения scrollTop с константой top_view — идет простое сравнение выше-ниже, я же предлагаю ввести проверку на изменение scrollTop.
$(this).scrollTop() - это всегда текущее значение. Для определения направления прокрутки требуется знать предыдущее, которое следует запоминать в отдельную переменную. В инициализации рядом с top_show и delay нужна какая-нибудь prevScrollTop, в условии на исчезновение сравнивать эту переменную с текущим значением, а в конце обработчика заносить в нее текущее значение.

$(window).scroll(function () {
  /*...*/
  if ( $(this).scrollTop() < prevScrollTop ) $('#show').fadeIn();
  /*...*/
  prevScrollTop = $(this).scrollTop();
});

если текущее значение меньше, значит прокрутка вверх, значит можно скрыть кнопку.

Что-то такое мне думается.

[Max]

Вопрос решил, нужно было просто дописать else $('#back').fadeOut();

Answer 1

[Александр Вульф]

У вас ошибки в коде. Исправленный вариант:

var top_show = 500; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
var time = 1000; // Скорость прокрутки

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > top_show) {
            $('#back').css("display", "block");
            $('#show').fadeIn();
        }
    });
    if ($(this).scrollTop() < top_show) $('#back').fadeOut();
    $('#back').click(function () {
        $('body, html').animate({
            scrollTop: 0
        }, time);
    });
});

Comments

[Max]

Так совсем кнопка" на верх" пропадает)

[Max]

jsfiddle.net/ukyjL2s6

[Max]

Вопрос решил, нужно было просто дописать else $('#back').fadeOut();