scrollTop div, когда пользователь начинает прокручивать, а затем позволяйте пользователям свободно прокручивать

У меня есть 2 div на веб-странице. Первый div — это #pattern, а другой div — #top.

Когда пользователь заходит на мою веб-страницу, видны два элемента div. как только пользователь начнет прокручивать, я хочу, чтобы div "#top" прокручивался вверх. Мне удалось добиться этого, но как только это будет сделано, я хочу, чтобы пользователь мог снова начать прокрутку, я просто хочу, чтобы анимация прокрутки появлялась один раз, когда пользователь прокручивается в первый раз.

Я использую плагин jquery.scrollTo.

Я пытался использовать флаг, но он не работает...

Вот мой html:

<div id="pattern">
</div>

<div id="top">
</div>

Мой CSS:

#pattern {
    height: 600px; 
    width:100%;
    background-color:blue
}

#top {
    height: 600px;
    width:100%;
    background-color:red;
}

и мой Jquery:

$(window).on('scroll',function(){    
    var flag=0 ;

    if((flag==0) && $(window).scrollTop()>10){ 
        $(window).scrollTo('#top', 800);
        flag=1;
    }    
});

Вот JSfiddle: http://jsfiddle.net/w8mgnmfe/


jquery scrollto scrolltop
person mmdwc    schedule 29.10.2015    source источник
comment
Помещение var flag = 0; вне обработчика прокрутки, вероятно, было бы самым простым решением.   -  person Shikkediel    schedule 29.10.2015

Ответы (2)


arrow_upward
3
arrow_downward

Просто отключите событие off при прокрутке:

$(window).on('scroll.mynamespace',function(){

    if($(window).scrollTop() > 10) {
        $(window).off('scroll.mynamespace');
        $('html,body').animate({scrollTop: $('#top').offset().top});
    }

});

Примечание. Я обновил его, чтобы не использовать плагины. Также измените mynamespace на что-то более значимое, например, scrollToDiv или что-то еще, что имеет смысл для вас. Это гарантирует, что вы отключите только это событие.

Если вы хотите повторно активировать его:

var autoScrolled = false;
var scrollBoundary = 10;

$(window).on('scroll.mynamespace',function() {

    var windowTop = $(window).scrollTop();

    if (!autoScrolled && windowTop > scrollBoundary) {
        autoScrolled = true;
        $('html,body').animate({scrollTop: $('#top').offset().top});
    } else if(autoScrolled && windowTop <= scrollBoundary) {
         autoScrolled = false;
    }

});

Скрипт: http://jsfiddle.net/ferahl/b5ybs6xg/1/

person Dominic    schedule 29.10.2015
comment
спасибо за ваш ответ, но я получаю сообщение об ошибке в своей консоли: TypeError: window.scrollTop не является функцией - person mmdwc; 29.10.2015
comment
@mmdwc, пожалуйста, попробуйте сейчас и проверьте скрипку - она ​​также не использует плагины. - person Dominic; 29.10.2015
comment
Неверная ссылка на скрипку - попробуйте сейчас - person Dominic; 29.10.2015
comment
отсутствует символ $ перед (window).scrollTop() › 10) { - person mmdwc; 29.10.2015
comment
Целенаправленная отвязка вроде бы довольно аккуратная. Голосование за то, что вы не видите каждый день. - person Shikkediel; 29.10.2015
comment
@DominicTobias Тобиас, возможно ли, когда я снова прокручиваю свою страницу, а позиция окна равна 0, чтобы снова активировать scrollTo? - person mmdwc; 29.10.2015
comment
@mmdwc Я вижу, у вас есть решение, я тоже добавил его (в основном то же самое) - person Dominic; 29.10.2015

arrow_upward
0
arrow_downward

Мне удалось найти решение, поставив флаг вне моего события прокрутки...

вот полный код:

var flag=0 ;

$(window).on('scroll',function(){    


    if((flag==0) && $(window).scrollTop()>10){ 
        $(window).scrollTo('#top', 800);
        flag=1;
    }    

        if($(window).scrollTop()==0){ 
        flag=0;
    }   
});
person mmdwc    schedule 29.10.2015