0

SOLVED add this to the html:

<body onload="location.href='#menu'">

Its the only solution and not a duplicate of the scroll question....pff.

I have edited this question in hopes that the SO community would revisit it. None of the solutions in the supposed duplicate question work or I am using them incorrectly. I posted my code with two of the solutions to show that I am trying. Please help!

Super basic javaScript question I can't find.....I'm learning from trial, mostly error, and StackOverflow.

When I refresh I want to return to the top of the page (F5 or browser reload or any other way the page can be reset). I believe this was the 'old' way browsers worked but when I refresh I stay in the same place on the page. I'm testing in Chrome. Of course I would like this behavior in all browsers.

In this case I am building a single page app. Most mobile users will never use the refresh/reload as it is buried in the hamburger, but I would like to handle this event by going back to the home state. In this case the <div data-role="page" id="menu">.

I am using jquery but I want to make sure and learn javascript.

I thank you all.

code:

 document.ready = init;

function init(){

var button = $('#facultyButton')
    ,facList = $('#facultyList')
    ,search = $('#facSearch')
    ,monikerBox = $('.monikerBox')
    ,events = $('#events')
    ,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
    ,html = "";

//executed on init
console.log('page init');
 $('html').scrollTop(0);

//events

$(window).on('load',function(){
    $('html, body').scrollTop(0);
});
button.click(function(){
    var value = "a";
Eric Sheasby
  • 235
  • 1
  • 3
  • 13
  • Thanks Christian Varga! I just looked at that and tried adding document.body.scrollTop = document.documentElement.scrollTop = 0; then $('body').scrollTop(0); on init but after reload I am still looking at the same div!! The console does not report any errors. – Eric Sheasby Apr 11 '14 at 02:45
  • everyone who marked this duplicate have yet to test. Thank you for keeping SO nice and tidy but you are mistaken. Now each "page" div scrolls to the top on reload but I am not taken to the div with id="menu" when I am in div id="facultySearch" for example.... – Eric Sheasby Apr 11 '14 at 02:51

1 Answers1

2

The window's load event only runs once right after the page is done loading. So this way you can be sure that after the page loads no matter what reason (first view or refresh) it will run.

$(window).on('load', function(){
    $('html, body').scrollTop(0);
});
Adam Merrifield
  • 9,819
  • 4
  • 37
  • 54
  • So we think alike. This doesn't seem to work. I stay in the same place. I believe the hang-up is the data-role="page" attribute. I need to jump out of that. I have 6 "pages" in the single html doc. Is my question more like jump to anchor??? – Eric Sheasby Apr 11 '14 at 02:39