My application includes several features that programmatically scroll to particular elements on a page. Unfortunately, it's not working on Safari/iPad. I have tried the following methods of scrolling:

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

$('html, body').animate({
    scrollTop: y
});

Is it simply not possible to programmatically scroll the window on Safari/iPad, or am I just doing it incorrectly? All of these methods worked for all browsers I tested on the PC.

My application includes several features that programmatically scroll to particular elements on a page. Unfortunately, it's not working on Safari/iPad. I have tried the following methods of scrolling:

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

$('html, body').animate({
    scrollTop: y
});

Is it simply not possible to programmatically scroll the window on Safari/iPad, or am I just doing it incorrectly? All of these methods worked for all browsers I tested on the PC.

• javascript
• ipad
• safari
• scroll

• Did you check this answer? stackoverflow.com/questions/19929197/… – Kostas Siabanis Commented Aug 3, 2017 at 17:29
• @KostasSiabanis - I tried that method and did not have any success (note: I am not the OP). – Martin Parenteau Commented Aug 3, 2017 at 19:12

6 Answers 6

I haven't found a way to scroll the window programmatically on iPad. One possible workaround is to wrap the page content in a fixed div container, and to scroll it by changing the div's scrollTop property. You can see that method in this codepen. I tested it successfully on iPad with Safari and Chrome, and on Windows with Firefox, Chrome and IE11.

HTML

<div id="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    ...
</div>

CSS

div#container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
div {
    height: 100px;
}
.div1 {
    background-color: red;
}
.div2 {
    background-color: green;
}
.div3 {
    background-color: yellow;
}

Javascript

var container = document.getElementById("container");
setInterval(function() {
    container.scrollTop += 1;
}, 20);

Have you tried any libraries? http://iscrolljs.com/ looks promising, but I cannot test (no iOS device).

• Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller.
• Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer.

Its working fine for me on safari and iPad:

$('html, body').animate({
        scrollTop: 0
 }, 1000);

Not sure but you can try it by giving some scroll animation timings in milliseconds.

I use the GreenSock ScrollTo plugin which works wonders. You can grab it from their website

The advantage is that it has easing options and works on any platform, etc

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1),   offsetY:70}});
  })
}) 

i am using following code of jquery and it work for every browser (i dont user IE :) )

  $("html,body").animate({
    scrollTop: 0
}, "slow");

Cross-browser scroll to top:

    if($('body').scrollTop()>0){
        $('body').scrollTop(0);         //Chrome,Safari
    }else{
        if($('html').scrollTop()>0){    //IE, FF
            $('html').scrollTop(0);
        }
    } 

Cross-browser a div with id = test_id:

    if($('body').scrollTop()>$('#test_id').offset().top){
        $('body').scrollTop($('#test_id').offset().top);         //Chrome,Safari
    }else{
        if($('html').scrollTop()>$('#test_id').offset().top){    //IE, FF
            $('html').scrollTop($('#test_id').offset().top);
        }
    } 

It seems safari doesn't like 'html' at all, while others don't like 'body'. And ('html, body') won't cut it either. So a simple solution may be;

function example() {
if($.browser.safari) scrollentity = $("body"); 
else scrollentity = $("html");
scrollentity .animate({scrollTop: $("#target").offset().top}, 1500, 'swing')
}