logo

jQuery scrollTop not working on Mobile Devices (iPhone, iPad, Android Phones)

  1. But, and the animation at mobile?

    • Removed, why?
      Because you would find that most of the mobile devices actually have a really bad performance impact on javascript animations, the simplest transition would became laggy at the moment.
      The reason?
      Many, but the first one is phones and tables processor and their browser core coding, which is not optimized for this kind of things.

      If you are running a mobile project you should suggest your clients to avoid using heavy animations on mobiles because of this, a laggy animations results in worse appeal than a simple blink.

    • Alex
    • May 10th, 2013

    I am here to help. The reason is because the mobile ios doesn’t know what $(‘html,body’)is. You have to animate $(“body”) instead.

    • Thank you a lot. Comment added to the post 😀

    • Hi Alex,

      I try to animate body, it works but it flashes up and down for a few times until it jump to correct div. Have you experienced like this before?

      • If you are using an < a > element as the trigger try putting e.preventDefault().
        With jquery usually $().click(function(e){ e.preventDefault(); //other stuff });

    • Anthony
    • August 6th, 2013

    Thanks! This was helpful!

  2. Thanks a million as this was a great help to me 🙂

    • Nikhil
    • January 8th, 2014

    Totally thank you for the save 🙂 By the way your blog header is amazing 🙂 why u not get website? 😀 😀

    • Because i merely make some posts during job breaks and my topics are not worth a site, but thank you for the compliments 🙂

    • Kalpesh
    • October 31st, 2014

    Thanks. You saved my day. It’s very helpful.

    • Gopichand
    • March 13th, 2015

    My animate method is working fine in Ipad in all the html pages but in one page it is lagging and loading slowly, even in that page i don’t have big functionality.Here is my code please help me.

    $(document).ready(function () {
        $(".menuBtn").click(function () {
            if (!$(".menuBtn").hasClass("menuBtn2")) {
                $(".menuBtn").addClass("menuBtn2");
                $(".leftMenu").animate({ left: '0px' }, 400,'linear');
            }
            else {
                $(".leftMenu").animate({ left: '-322px' }, 400,'linear');            
                $(".menuBtn").removeClass("menuBtn2");
            }
            return false;
        });
    });
    • Your code is pretty plain, i don’t see many correction you can do. So my suggestion is this: jQuery animate on older iPads (1,2) can be pretty slow, it depends on the performance of the machine.

      Going straight to the point i’d suggest you to use jQuery transit : http://ricostacruz.com/jquery.transit/

      This library will make use of css animations, which are faster on mobile devices.

  3. This is great. Though I just cant get it to work on my ipad mini, nor does it work on friends’ iPhones.
    If you could look at my codepen and see if there is anything I can do…Ive been up all night trying to fix it haha

    http://codepen.io/Spekachu/full/wKomgm
    http://app.crossbrowsertesting.com/livetests/run/3748743

    I want the same scrolling functionality if I can have it, but even the window.scrollto will not do anything on my ipad or iphones.

    $('a[href^="#"]').on('click tap', function(event) {
      var target = $($(this).attr('href'));
      if (target.length) {
        event.preventDefault();
        if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
          window.setTimeout(function() {
            window.scrollTo(0, 500);
          }, 0);
        } else {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
        }
      }
    });
    • sisi
    • November 5th, 2015

    Hi,

    How do I use this for instafeed js plugin? I want my feed infinite scroll. Right now my code look like this. It works in desktop, but it doesnt work in mobile.

    $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
    // call feed.next() once the page reaches the bottom
    feed1.next();
    feed2.next();

    }
    });

  4. Nothing worked for me 🙁
    I want to scroll o page with scrolltop which is inside an iframe.
    http://www.jeanmichellsouber.com/iframe

    • Sandy
    • July 29th, 2016

    Hi Jonathan! If you could please help, I would really appreciate it! I am developing an app in XDK and using Jquery to determine when the user scrolls to the bottom of first page of JSON data another page loads and more JSON data will appear. My problem is that scroll works fine in emulator and on tablet but not on the mobile phone. My code looks like this:

    var currentPage = 1;

    $(window).scroll(function () {
    if ($(window).scrollTop() === $(document).height() – $(window).height()) {
    currentPage++;
    loadMoreAds(currentPage);
    }

    });

    In app.css I see that by default I have:
    body {
    -webkit-touch-callout: none ;
    -webkit-text-size-adjust: none ; -ms-text-size-adjust: none ;
    -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;
    -webkit-highlight: none ;
    -webkit-tap-highlight-color: rgba(0,0,0,0) ;
    -webkit-tap-highlight-color: transparent ; /* For some Androids */
    }

    html {
    -ms-touch-action: pan-x ;
    }

    body {
    -ms-touch-action: pan-y ;
    -ms-content-zooming: none ;
    }
    I am just beginning my programming journey so I apologize if my question is stupid. Thank you!

    • Sandy :

      Hi Jonathan! If you could please help, I would really appreciate it! I am developing an app in XDK and using Jquery to determine when the user scrolls to the bottom of first page of JSON data another page loads and more JSON data will appear. My problem is that scroll works fine in emulator and on tablet but not on the mobile phone. My code looks like this:

      var currentPage = 1;

      $(window).scroll(function () {
      if ($(window).scrollTop() === $(document).height() – $(window).height()) {
      currentPage++;
      loadMoreAds(currentPage);
      }

      });

      In app.css I see that by default I have:
      body {
      -webkit-touch-callout: none ;
      -webkit-text-size-adjust: none ; -ms-text-size-adjust: none ;
      -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;
      -webkit-highlight: none ;
      -webkit-tap-highlight-color: rgba(0,0,0,0) ;
      -webkit-tap-highlight-color: transparent ; /* For some Androids */
      }

      html {
      -ms-touch-action: pan-x ;
      }

      body {
      -ms-touch-action: pan-y ;
      -ms-content-zooming: none ;
      }
      I am just beginning my programming journey so I apologize if my question is stupid. Thank you!

      try using

      $(“body”).scroll();
      $(“body”).scrollTop();

      instead of $(window).

      Also try to understand if it’s the .scroll listener that doesn’t work or the equation to determine if the user has scrolled!

    • Akshay
    • September 20th, 2016

    Hi Jonath,

    i have tried everything mentioned above to make scrolltop work in my IPad but unable to do it, my scenario is as below
    application is rendering inside iframe where i want next button click should focus on top of next page.
    Can you please help me for it or suggest something.

    • carlos
    • August 14th, 2018

    You just saved my life

    • Harry
    • July 10th, 2019

    if(found){
    filesize= file.size; //in bytes
    totalFileSize += file.size;
    if(totalFileSize > maxsize){
    var value = Math.round((totalFileSize/(1024*1024))*100)/100;
    //alert(‘You have exceeded the limit of size.. (‘+value+’ MB) \n Maximum limit of size you can use is 4.5MB’);
    totalFileSize= totalFileSize – file.size;
    if(isSinAttachment){
    $(‘#ErrorMessage2’).show();
    document.getElementById(“ErrorMessage2”).innerHTML = ‘Error: You have exceeded the limit of size.. (‘+value+’ MB). Maximum limit of size you can use is 1.0 MB.’;
    }else{
    $(‘#ErrorMessage2’).show();
    document.getElementById(“ErrorMessage2”).innerHTML = ‘Error: You have exceeded the limit of size.. (‘+value+’ MB). Maximum limit of size you can use is 4.5 MB.’;
    }
    //window.scrollBy(0, -300);
    if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
    alert(1111111111);
    alert(navigator.userAgent);
    console.log(document.body.scrollTop,1113333111);
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    }else{
    $(“html, body”).animate({ scrollTop: -1000 }, 600);
    alert(navigator.userAgent);
    }
    // $(“html, body”).animate({ scrollTop: -1000 }, 600);
    createTableJS();
    }else{
    document.getElementById(“ErrorMessage2″).innerHTML = ”;
    getAsTextJS(file);
    }
    }else{
    document.getElementById(“ErrorMessage2”).innerHTML = errmsg;
    //window.scrollBy(0, -300);
    $(“html, body”).animate({ scrollTop: -1000 }, 600);
    createTableJS();
    }
    }

    • Mirelys
    • August 19th, 2019

    Thanks, this has worked!

  5. Useful information. Fortunate me I found your website accidentally, and I’m shocked
    why this accident did not took place earlier! I bookmarked it.

  1. No trackbacks yet.

 
Bitnami