CODEWITHSUNDEEP
jqueryzurb-foundationzurb-foundation-6
mimelaine
mimelaine

Reputation: 113

Foundation 6 - jQuery - scrollTop not working for mobile

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.

Upvotes: 0

Views: 481

Answers (2)

LSerni
LSerni

Reputation: 57428

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.

Upvotes: 0

Daniel Protopopov
Daniel Protopopov

Reputation: 7246

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(); }); }

Upvotes: 0

Related Questions