n6yw3a
Last Updated: May 10, 2017
·
12.03K
· christianbundy
Ayyylmao

PEBKAC: jQuery scrollTop not working on mobile

Question: It works on a desktop, why doesn't this work on mobile?

$('html').scrollTop({scrollTop: 0, 0);

Answer: Because html isn't being treated as a DOM node.

$('body').scrollTop({scrollTop: 0, 0);

Always the body, never the html.

Say Thanks
Respond

2 Responses
Add your response

25164
Mxfb4hqf normal

Even the body doesn't works for me. Nor window or html,body

over 1 year ago ·
27817
1b9b9f35209005735874c5e7a1593b74

A common scrollTo issue is having overflow set on the "html, body" element in css. Rarely mentioned when having scrolling/animating issues on html/body elements and can end up in excessive over-engineering.

If overflow needs to be set, put it on the body element only. Not both html,body.

It is also a good habit to use a data-* attribute in place of classes or IDs in your html. This gets you in the habit of separating styles from code. Consider this to make your life easier in the future:

Create Reusable Scroll Function

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Create data attributes to html elements (data-name is arbitrary and should make sense):

ADD HTML LINK

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a> 

ADD HTML ELEMENT

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

VERIFY CSS
» overflow added to "html,body" won't work

body { overflow-x: hidden; }

INIT FUNCTION ON READY
» initialize on doc ready with attribute name selector to create flexibility on multiple calls

scrollioreceiver('[data-sender]');
over 1 year ago ·