Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Danny Luna
Danny Luna
5,899 Points

ScrollTop stops .animate halfway thru animation on IOS

I want the scrollup function to execute after the animation completes. I keep getting random occurrences of the mobileNavclick function stopping almost immediately after its fired.

This works fine everywhere expect on iOS mobile device

Click Event for Mobile Nav

$("#navContainer ul li a").on('click',function () {
    mobileNavClick();
    checkSize();
    //scrollUp();
});
$("#menu").on('click',function (){
    mobileNavClick();
    checkSize();
});

Mobile Nav Function

function mobileNavClick() {  
        var mobileMatch = window.matchMedia('(max-width: 600px)');
        var nav = $('#navContainer');
        var navFoot = $('#navFooter');
        var navLeftCSS = nav.css('left');
        if (mobileMatch.matches) {

            animateNav();
         }
         else {
            animateNavRight();
         }

         function animateNav() {
             var navWindowWidth = '-' + $(window).width();
             if ($('#navContainer').css('left') == '0px') {
             nav.animate ({left: navWindowWidth});
             navFoot.animate ({left: navWindowWidth});
             }
         }
         function animateNavRight() {
             var navWindowWidth = $(window).width();
             if ($('#navContainer').css('left') == navWindowWidth) {
             nav.animate ({right: navWindowWidth});
             navFoot.animate ({right: navWindowWidth});
             }  
         }   
}

Return Scroll to 0px

function scrollUp() {
    var wrapperScrollPosition = $('#navContainer').scrollTop();
    var mobileMatch = window.matchMedia('(max-width: 600px)');
    $('#wrapper').scrollTop(wrapperScrollPosition);
        //If on mobile device body scrolls to 0
        if (mobileMatch.matches) {
            $('body').scrollTop('0');
        }
}
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Danny Luna, just letting you know I've formatted your code blocks a bit with the syntax highlighting to make it easier to read.

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You'll want to add the event.preventDefault() method to your click events to stop the normal/default action from occurring (which would include following the href of the a tag, etc.).

To do so, you need to pass a parameter into the anonymous function that you're using on the click events, and then run the preventDefault() method on that:

$("#navContainer ul li a").on('click', function(event) {
    event.preventDefault();
    mobileNavClick();
    checkSize();
    //scrollUp();
});
$("#menu").on('click', function(event) {
    event.preventDefault();
    mobileNavClick();
    checkSize();
});

See how that goes.