CODEWITHSUNDEEP
jqueryiossafariscrolltop
userlite
userlite

Reputation: 499

How to show the iOS Safari address bar with javascript?

I'm using jQuery to animate the scrollTop based on changes to the hash in the location. Works great.

The problem is, when I click "Home", I want it to scroll all the way to real top-- INCLUDING the address bar.

Apparently this is the opposite behavior of what most people want. So there are many questions out there about how to keep that pesky address bar hidden.

For my case, I want to be able to scroll (using JavaScript) to the top of the page. Right now when I try animating scrollTop to 0 or to -100 or to -500 it just puts me to the top of the content and the address bar stays hidden.

Upvotes: 1

Views: 4275

Answers (2)

Lorenz Haase
Lorenz Haase

Reputation: 364

for me this works:

document.body.scrollTop = -1

...but the content is a bit shifted afterwards due to the momentum scrolling, so I usually use an short interval that sets the scrollTop to -1 until its at the right position.

I use this helper...

const showMobileUrlBar = () => {

  let i = 0
  const to = setInterval(() => {

    document.body.scrollTop = -1

    // clear timeout after 250 ms and reset scrollTop to 0
    if (i++ > 25) {
      clearInterval(to)
      document.body.scrollTop = 0
    }

  }, 10)

}

...which can be used in an onComplete callback when animating the scroll position, like this:

TweenMax.to(window, 0.5, {scrollTo: 0, onComplete: showMobileUrlBar})

Not the best solution but it works on iPad and iPhone.

Upvotes: 0

imbecile
imbecile

Reputation: 468

you could try setting document.body.scrollTop=0. This will show the address bar. Hope this helps.

Upvotes: 2

Related Questions