Question

http://jqueryfordesigners.com/demo/scroll-link-nav.html

The link above is more or less what im looking for in terms of the active state responding to the scroll position.

But if one tries this on an ipad the active state sticks in certain places and trying to navigate purely by tapping the buttons, it stops scrolling after the first tap.

Anyone know any fixes for this for the ipad issues?

Answer 1

I have one solution which does the scrolling on all browsers

http://jsfiddle.net/t9mna/1/ all browsers

$("nav ul li a").click(function(){
   $(".selected").removeClass("selected");
    $(this).addClass("selected");
    var $scrollTo = $($(this).attr("href"));
    $('html, body').animate({
    scrollTop: $scrollTo.offset().top
    }, 500);
});

​and another for just iPad, i don’t have an iPad so i personally can’t test it so let me know how it goes

http://jsfiddle.net/t9mna/3/ just for iPad //not been tested by me

function isiPad() {
    return navigator.userAgent.match(/iPad/i); 
}


    $("nav ul li a").click(function(){
       $(".selected").removeClass("selected");
        $(this).addClass("selected");
        var $scrollTo = $($(this).attr("href"));
        $(function() {
        if ($(isiPad).length != 1) {
        $('html, body').animate({
        scrollTop: $scrollTo.offset().top
        }, 500);
    }
    });
    });​