Всем привет! Наткнулся в одном приложении на андроид на интересную кнопку наверх. Которая при прокрутке вниз прячется, а при прокрутке навех выезжает. Уверен что фишка не новая и многие уже делали. Все оказалось не так сложно, но вылез некрасивый баг. Если быстро покрутить колесиком вверх-вниз. Кнопка выполняя все действия и еще какое-то время туда-сюда дергается. Раздражает сильно! Возможно ли сделать сброс или остановку предыдущих событий и выполнять последнее действие??? А те кому понравится пользуйтесь на здоровье))) Код (Javascript): /** Плавная прокрутка "Наверх" */ var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх" var delay = 1000; // Задержка прокрутки var tempScrollTop, currentScrollTop = 0; $(document).scroll(function(){ currentScrollTop = $(document).scrollTop(); if (tempScrollTop < currentScrollTop ){ //scrolling down $('#am-top').slideUp(); } else if (tempScrollTop > currentScrollTop ) { //scrolling up if ($(this).scrollTop() > top_show) $('#am-top').slideDown(); else $('#am-top').slideUp(); } tempScrollTop = currentScrollTop; }); // При клике по кнопке "Наверх" попадаем в эту функцию $('#am-top').click(function () { /* Плавная прокрутка наверх */ $('body, html').animate({ scrollTop: 0 }, delay); }); HTML: <body> <div id="am-top">UP</div> </body> Код (CSS): #am-top { position:fixed; bottom: 10px; right: 10px; color: white; background: green; padding: 10px; } https://jsfiddle.net/ghostcom/4sgaq24L/
это не баг, а нормальное поведение (js делает всё, как ты ему сказал). методы slideUp и slideDown последним параметром принимают функцию, которая должна выполниться после завершения анимации. Создаешь глобальную переменную, которая будет "разрешать" или "запрещать" выполнение всей функции. В начале выполнения анимации - запрещаешь выполнение функции, после завершения - разрешаешь. Вот так. --- Добавлено --- ну и display:none; - изначально для кнопки. Она же не нужна сразу после загрузки страницы.
Вот что получилось Код (Javascript): /** Плавная прокрутка "Наверх" */ var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх" var delay = 1000; // Задержка прокрутки var tempScrollTop, currentScrollTop = 0; var allow = true; $(document).scroll(function(){ if ( allow == false ) return; currentScrollTop = $(document).scrollTop(); if (tempScrollTop < currentScrollTop ){ //scrolling down allow = false; $('#am-top').slideUp(function(){ allow = true; }); }else if (tempScrollTop > currentScrollTop ) { //scrolling up if ($(this).scrollTop() > top_show) { allow = false; $('#am-top').slideDown( function(){ allow = true; }); } else { allow = false; $('#am-top').slideUp( function(){ allow = true; }); } } tempScrollTop = currentScrollTop; }); $('#am-top').click(function () { /* Плавная прокрутка наверх */ $('body, html').animate({ scrollTop: 0 }, delay); });