ScrollTop really jerky in Chrome

前端 未结 2 379
清酒与你
清酒与你 2021-01-23 16:17

I\'m using the scrollTop function to create a parallax scrolling website, binding the scrollTop function to different anchors throughout my website.

The problem I\'m hav

相关标签:
2条回答
  • 2021-01-23 17:01

    Instead of doing your fade function on .scroll(), which is fired every time the page scrolls a tiny bit, do it on the .animate() callback, which is only triggered once when the scrolling is complete.

    $('.recipes').click(function(){
         var startY = $('#container').position().top + $('#container').outerHeight();
         $('html,body').animate(
              { scrollTop: $(".main1").offset().top },
              1500,
              function() {
                 checkY(startY);
              } 
         );
    });
    
    $('.cooking').click(function(){
         var startY = $('#container').position().top + $('#container').outerHeight();
         $('html,body').animate(
             { scrollTop: $(".main2").offset().top },
             1500,
             function(){
                 checkY(startY);
             }
         );
    });
    

    And the OP's original checkY() function:

    function checkY(i) {
        if( $(window).scrollTop() > i ) {
            $('#backToTop, #navigation').fadeIn(600);
        } else {
            $('#backToTop, #navigation').fadeOut(600);
        }
    }
    
    0 讨论(0)
  • 2021-01-23 17:14

    If you are open to an alternative approach, using a plugin, jQuery scrollTo has always been very smooth when I have used it.

    This would let you do

    $('.recipes').click(function(){
        $.scrollTo('.main1', 1500);
    });
    
    0 讨论(0)
提交回复
热议问题