Here's a scenario that can drive your users crazy: A certain page on your site always seems to open in the middle instead of at the top, making users scroll up to see the start of the page. This has happened to me more than once (thanks to the LOGIN module), but I have a simple solution...
Focus on the problem? Focus IS the problem!
The most common cause is misplaced/unintentional page focus. A control somewhere below the bottom edge of your window is receiving the intial "focus" and is therefore forcing your browser to scroll enough to bring the control into view. Normally this behavior is good since it helps you determie where the cursor is. If, however, you place a LOGIN module low enough on a page (near the bottom or under a particularly long vertical menu), then your users' browsers will often be forced to scroll in order to show the control upon page load.
Stopping the Scroll
Well, you could try to cook up some event handler to catch the window scroll and prevent the action from happening in the first place. A simpler approach would be to simply let the page scroll and then force it back to the top. We do this with a hidden Text/HTML module, a bit of javascript and a bit more "helper" javascript.
You might expact that such a solution could result in a page that appears to "jump" down and then back up again. Perhaps if you have a slow enough machine (a really, really slow machine). In practice the page really does "jump" down and back up but it happens so quickly that you don't see it occur.
The Code
This is really simple to do but the script requires a little bit of explanation. First, here's what to do:
- Add a Text/HTML module anywhere on the page.
- Edit the text of the Text/HTML module, click the "SOURCE" button, replace anything already there with the following code and then click "UPDATE" to save it:
NOTE: If you copy-and-paste you'll need to remove the extra space just after each "<" and just before each ">" in the DIV and SCRIPT tags.
< div >
< script >
function addLoadEvent(func)
{ var oldonload = window.onload;
if (typeof window.onload != 'function')
{ window.onload = func; }
else
{ window.onload = function()
{ oldonload();
func();
}
}
}
addLoadEvent(function() {window.scrollTo(0,0) });
< /script >
< /div >
- Now, go into the Text/HTML module's SETTINGS. Uncheck "Display Container" and uncheck "Allow Print".
If this is a LOGIN module, uncheck "Inherit View permissions from Page" and check the VIEW option for "UNAUTHENTICATED USERS". This insures the code only executes when users are not logged in (which is the only time the LOGIN module grabs focus for the USERNAME input box).
Click "UPDATE" to save your module settings changes.
That's it! Log out, go to a different page and then navigate back to the problem page. You should be looking at the TOP of your page instead of being scrolled down the page as before.
Great! But that seemed like a LOT of script just to scroll the page...
Scrolling the page was a simple one-liner with the "window.scrollTo" function. The rest of the script was a "helper" function that leveraged javascript closure to insure that our "scrollTo" function waited until the page was fully loaded before it executed (waited until after the LOGIN module grabbed the focus).
You can read more about how to use the "helper" script and javascript closure in general in this post.
If you're not convined about the use of the "helper" function, try using the javascript scroll function by itself:
< script > window.scrollTo(0,0) < /script >
You'll probably find that the window still has the scroll problem -- the "scrollTo" script does execute but it isn't waiting for the page to finish loading. Using javascript "closure" takes care of this and works wonderfully well for DNN pages where you don't have direct access to add an "onload" event to a page's "body" tag.