CODEWITHSUNDEEP
jqueryiosscrolltop
marcusstarnes
marcusstarnes

Reputation: 6531

IOS Safari Scroll to Top breaking jquery scrollTop

I have a web page that uses jquery to scroll down to other (dynamically loaded) elements on the page when clicked (upon clicking an item, some ajax loads in some additional elements on the page and it then scrolls down to the first item in those newly added elements).

All works fine except for on IOS Safari, if I use tap the status bar to scroll to the top of the page (normal ios behaviour), when I then click any of my links, whilst the Ajax does load in the new elements, the jquery scrollTop no longer works and I remain stuck at the top of the page (unless I then manually scroll). If however I scroll just 1px, then click on any of the links, the jquery scrollTop works again. It's like, whenever the IOS status bar Scroll to top feature is used, it locks it at the top until you manually scroll (even as little as 1px), then the javascript scrolling works again!

Ive tested it under Chrome on my iPhone and it all works ok, it just appears to be under Safari.

Here's an example of the jquery that scrolls to the newly added elements once one of my links has been clicked (and new elements loaded onto page via ajax):

$('ul.c1 a').click(function () {
        $('html, body').delay(250).animate({
            scrollTop: $('.c2').offset().top
        }, 200);
    });

Upvotes: 3

Views: 5646

Answers (1)

Bitneko
Bitneko

Reputation: 123

I got around this problem by calling window.scroll(0,1) to 'reset' the scroll before calling jquery.animate on scrollTop. It works for me because my navigation is triggered by a select dropdown and its always at the top of the page.

$select.on('click', function(){
     window.scroll(0, 1);
});

$select.on('change', function(){
    var $this   = $(this),
        idx     = $this.prop("selectedIndex") - 1,
        dist    = $timeline.find('.chapter').eq(idx).position().top;

    $this.prop("selectedIndex", 0);

    $('html, body').stop(true).animate({scrollTop: dist}, 250);
});

Upvotes: 1

Related Questions