0

in Foundation 6, jQuery scrollTop not working for mobile:

var hpSecondSection = $('#hp-section-2'),
    fixedTopBar     = $('#header-top-bar');

    $('.scroll-down-bar').click(function() {

        $('html, body').animate({
            scrollTop: hpSecondSection.offset().top + fixedTopBar.innerHeight()
        }, 400);

    });

This issue is provided by .off-canvas-wrapper, that makes mobile menu panel to work and has overflow-x: hidden

I can't find a solution about this.. thanks for your help.

mimelaine
  • 113
  • 5

2 Answers2

0

According to http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/, mobiles don't know what HTML and body is. You should use solution provided in the link to achieve desired effect like so:

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(200,100) // first value for left offset, second value for top offset }else{ $('html,body').animate({ scrollTop: 100, scrollLeft: 200 }, 800, function(){ $('html,body').clearQueue(); }); }

Daniel Protopopov
  • 6,778
  • 3
  • 23
  • 39
  • You're right about the selector, but it's not the problem described. If you try in foundation 6, when the mobile panel init, you'll find the issue I wrote above. Any selector does not make sroll to work. – mimelaine Feb 15 '16 at 17:54
0

You can still determine where the scroll is (in percentage from 0 = top to 100% = bottom) using .scrollY and using outerHeight() (which gets recalculated if e.g. the browser bar is hidden) rather than height():

let scrollPercent = 100.0*window.scrollY / ($(document).height() - $(window).outerHeight());

Crude, but it works for me.

LSerni
  • 55,617
  • 10
  • 65
  • 107