Javascript-форум - JQUERY - конфиликт функция при скроллинге

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - JQUERY - конфиликт функция при скроллинге (https://javascript.ru/forum/jquery/51602-jquery-konfilikt-funkciya-pri-skrollinge.html)

JQUERY - конфиликт функция при скроллинге

есть кнопка перемотки вверх-назад, которая первым клик перематывает страницу вверх, запоминаея позицию на странице для возврата.
вторым кликом - происходит возврата сверху страницы в исходное положение на странице (как вконтакте)

хочу добавить обработку событий скролстарт и скролстоп.
для этого использую следующий код

Код:

function scrolled() {

    //do by scroll start

$('.extended-ControlsMenu').hide();

    $(this).off('scroll')[0].setTimeout(function(){

        //do by scroll end

$('.extended-ControlsMenu').show();

        $(this).on('scroll',scrolled);

    }, 1500)

}

$(window).on('scroll',scrolled);

сам по себе код рабочий, сама по себе конпка "вверх-назад" тоже работает.

но, когда коды в скрипт довать коды кнопки и код обработки старт-стоп скроллинга - кнопка перемотки "вверх" работает только в режиме "вверх", а назад - уже не работает.
файрбаг ошибок в скрипте не показывает.

опытным путем установил, что баг возникает изза строчки

Код:

$(this).off('scroll')[0].setTimeout(function(){

но, что там не так и как исправить - ума не приложу.
если сможете помочь - буду признателен.

полный код скрипта ниже

Код:

jQuery(function($){

        var topLink = $('#top-link');

        topLink.css({'padding-bottom': $(window).height()});

        // если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде

        topLink.toplinkwidth();

        $(window).resize(function(){

                topLink.toplinkwidth();

        });



function scrolled() {

    //do by scroll start

$('.extended-ControlsMenu').hide();

    $(this).off('scroll')[0].setTimeout(function(){

        //do by scroll end

$('.extended-ControlsMenu').show();

        $(this).on('scroll',scrolled);

    }, 1500)

}

$(window).on('scroll',scrolled);





        $(window).scroll(function() {





            if (jQuery('#top-link').attr('hidden-button') == 'false') {

                if($(window).scrollTop() >= 1) {

                        topLink.fadeIn(300).children('a').html('<span id="topicon"></span><span id="text">Наверх</span>').parent().removeClass('bottom_button').addClass('top_button');

                } else {

                        topLink.children('a').html('<span id="backicon"></span>').parent().removeClass('top_button').addClass('bottom_button');

                }

            }

        });

        topLink.click(function(e) {

                if($(this).hasClass('bottom_button')){

                        // при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение

                        $("body").scrollTo( pos + 'px', 200 );

                } else{

                        // определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх

                        pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

                        $("body,html").animate({scrollTop: 0},200);

                }

                return false;

        });

});

Ты молодец, конечно, вешаешь событие sroll на свою вверх-вниз кнопку, и второе событие scroll которое убивает оба, и навешивает снова только второе.
Используй namespace при навешивании и удалении событий, что бы не удалять все подряд, а лучше перепиши так чтоб не пришлось вообще удалять, тем более через setTimeout

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

событие $(window).on('scroll',scrolled); срабатывает для блока с классом .extended-ControlsMenu
и оно работает даже вместе с topLink.click(function(e) {, где и реализованы вычисления для кнопки вверх-вниз с идентификатором #top-link.

если я вас правильно понял, нужно разнести события? каким образом это можно сделать?

не на столько силен в джаваскриптах, как может показаться.
$(window).on('scroll',scrolled); брал из примера и адаптировал.

Цитата:

Используй namespace при навешивании и удалении событий, что бы не удалять все подряд, а лучше перепиши так чтоб не пришлось вообще удалять, тем более через setTimeout

можно примеры?

jQuery.myscrollcontrol(jQuery.fn, {

$(window).on('scroll',scrolled);

function scrolled() {
//do by scroll start
$('.extended-ControlsMenu').hide();
$(this).off('scroll')[0].setTimeout(function(){
//do by scroll end
$('.extended-ControlsMenu').show();
$(this).on('scroll',scrolled);
}, 1500)
}

});

вот так?

upd - ерунда получилась.

Цитата:

Сообщение от alecto

простите, не совсем понял каким образом события мешают друг другу.

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

Короче,так должно заработать
$(window).on('scroll.scrolled_ns',scrolled);

function scrolled() {
//do by scroll start
$('.extended-ControlsMenu').hide();
$(this).off('scroll.scrolled_ns')[0].setTimeout(function(){
//do by scroll end
$('.extended-ControlsMenu').show();
$(this).on('scroll.scrolled_ns',scrolled);
}, 1500)
}

ура! заработало! спасибо огромное!

скажите, вот это называется

Цитата:

namespace

scroll.scrolled_ns
?

да, scrolled_ns это неймспейс. Загугли jq пространство имен и все поймешь.