Странное поведение функции прокрутки

Question

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

Я подумал, что использование window.scroll будет хорошим подходом здесь, потому что я могу читать текущее значение scrollTop, поскольку я сожалею, что это не работает, в некоторых браузерах я не могу прокручивать (IE), на других (Chrome, Firefox) после нажатия тега, связанного с этой функцией. У меня появилось поведение автоматического прокрутки, немного вверх, а затем немного вниз.

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

$(window).scroll(function() { 
    var y = $(window).scrollTop(); 
    console.log(y); 
    var mainBanner = $('header').height(); 

    if (y > 1 && y < mainBanner) { 
     $('#slideUpHead').click(function(){ 
     $("html, body").animate({ scrollTop: mainBanner - y}, 600); 
     }); 
    } 
    else if(y < 1){ 
      $('#slideUpHead').click(function(){ 
     $("html, body").animate({ scrollTop: y + mainBanner}, 600); 
      }); 
    } 
    else { 

    } 


}); 

вот мой второй подход, частично рабочий:

myScroll = function(){ 

    var mainBannerH = $('header').height(); 
    var y = $(window).scrollTop(); 

    if (y > 1 && y < mainBannerH) { 
      $("html, body").animate({ scrollTop: mainBannerH - y}, 600); 

    } 
    else if(y < 1){ 

      $("html, body").animate({ scrollTop: y + mainBannerH}, 600); 

    } 
    else { 
     console.log("It's not working properly"); 
    } 

}; 



$('#slideUpHead').click(myScroll); 

Answer 1

В настоящее время следующее решение работает просто отлично, благодаря Ahmad я изменил свой подход и получить позицию scrollTop немного по-другому, не на 100% уверен, почему, но он работает.

myScrollTo = function(){ 

    var mainBannerH = $('header').height(); 
    var myPos = $('html,body').scrollTop(); 

    if (myPos > 1 && myPos < mainBannerH) { 
      $("html, body").animate({ scrollTop: mainBannerH - myPos}, 600); 

    } 
    else if(myPos < 1){ 

      $("html, body").animate({ scrollTop: myPos + mainBannerH}, 600); 

    } 
    else { 
     console.log("It's not working properly"); 
    } 

}; 



$('#slideUpHead').click(myScrollTo);