go to #id by scroll buggy on iPad

Question

Coding a one page layout with animated scroll for Nav. Everything works perfect in desktop, but on the iPad you simply can't go back and forth by clicking the nav li links. I noticed though if you click a nav link then scroll a little down/up the page it will work.

function init_siteNav(){

    function goToByScroll(id){
        $('html,body').animate({scrollTop: $(id).offset().top},'slow');
    }

    $('.siteMenu li.home a').click(function(){
        goToByScroll('body');
        return false;
    });

    $('.siteMenu li.clients a').click(function(){
        goToByScroll('#portfolioWrap');
        return false;
    });

    $('.siteMenu li.contact a').click(function(){
        goToByScroll('#contactMapHolder');
        return false;
    });
}

Any suggestions?

score 0 · Answer 1 · answered Jul 09 '12 at 13:06

Try triggering the click on the LI element instead of the HREF. The HREF elements might be a little small for a finger on the iPad, the larger physical area the LI is producing may give you better results.

Put alerts in the click events to make sure they are being fired by the iPad.

go to #id by scroll buggy on iPad

1 Answers1