Menu
I have some tabbed content on a page, with hash segments in the URL that take you to the correct tab content. Nothing unusual. However, as the tabs are a short way down the page, when someone visits with a hash target in the URL, they get dropped to down the page to the tabs bit - which cuts off the top navigation bar and breadcrumbs.
I don't want that to happen. It's disorientating.
I thought it would be simple to rectify: something like:
$(function(){
window.scrollTo(0,0)
});
That doesn't work. You still get dropped at the hash anchor.
I've tried calling it on window.load(). I've tried moving the script from the < head > to just before the . I've tried window.scrollTo and window.scroll. Nothing works. The only script that I've been able to get to actually move me back up to the top of the page is this:
$(function(){
setTimeout(function(){
window.scrollTo(0,0)
},2000);
});
... which is even worse than not scrolling at all.
Why won't anything else work? Am I doing something wrong, or is something else preventing me moving the user back to the top of the page?
===================== Edit:
An example (you may want to pad it out with some more Lorem paras). Save it to a new HTML file and then go to the #hash1 URL:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Load</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
/*
// doesn't work
$(function(){
window.scrollTo(0,0);
});
// doesn't work
$(window).on('load', function(){
window.scrollTo(0,0);
});
// doesn't work
window.scrollTo(0,0);
// works, but horrible UX.
$(function(){
setTimeout(function(){
window.scrollTo(0,0)
},2000);
});
*/
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a name="hash1"></a>Hash 1</p>
<script type="text/javascript">
// doesn't work
// window.scrollTo(0,0);
</script>
</body>
</html>
474
browsers will scroll on certains conditions (hashtags, restoring the previous scroll state when doing F5, focusing elements or calling scrollIntoView). Scroll events won't be fired in all these cases.
Unfortunately, I haven't found any reliable way to avoid this.
First, I suggest you monitor scroll events on window, and see if you can cancel the event.
If it doesn't work, I see no solution but to move your anchors to the top, or just remove them.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
