Quick Tip: Hide Mobile Web Browser Address Bar Improved
If you have ever developed for the mobile web, you have probably come across this little snippet of JavaScript which enables you to hide the mobile browsers address bar:
function hideURLbar() {
window.scrollTo(0, 1);
}
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
This code hides the browser address bar in iOS and Android if the length of the pages content is long enough. This is a very common function and is excellent if you would like to increase the mobile browsers content viewable area. I have one small problem with it, it doesn’t take into account page anchors (http://www.example.com/#comments). When the page loads with a page anchor, it cancels out this anchor and scrolls to the top on load.
I propose an improvement to this code javascript snippet that will add a page anchor check statement prior to the window.scrollTo(0, 1); function.
function hideURLbar() {
if (window.location.hash.indexOf('#') == -1) {
window.scrollTo(0, 1);
}
}
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

Discussion In Progress (3)
There are already 3 comments on this post. Why don't you add another, and join the discussion.
Does it work when document height is less than window height?
It does not work when the height of the page is less than the height of the window. You can fix this by just setting a minimum height on the page that matches the window size.
–
Chris
Hello! This is my 1st comment here so I just
wanted to give a quick shout out and say I really enjoy
reading through your blog posts. Can you
recommend any other blogs/websites/forums that go over the same
subjects? Thanks a ton!
Trackbacks and Pingbacks (0)
Below, is a collection of trackbacks and pingbacks related to this article. For those that don't know, trackbacks and pingbacks are sites that mention and/or link back to this specific article.