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);
}