Scroll To Top

[trent]

Hi All,

Anyone know how to automatically scroll to the top of the page after loading a form? Is there a way to make every page do this?

I've tried placing this in a few places without any luck:

<script type="text/javascript">
    $(document).ready(function () {
        window.scrollTo(0,0);
    });
</script>

Regards,
Trent

[Bruce]

from what I've seen the page always starts at the top, unless some control on the page has the focus, then it scrolls the page down to bring the focus control into view.
So, what control has the focus when you open a page like this?

cheers
Bruce

[trent]

Hi Bruce,

On every page, the last item that is created is a 'View Mobile Site' button in the bottom right hand corner of the page. This always seems to have focus. I've checked the html in Firebug and it seems that the focus is meant to be set on a specific field in a form that is loaded prior to the 'View Mobile' button form (the PER_GivenNames field) but the field doesn't seem to get the focus:

<div class="nt-center" id="setmobileon_div"><form onsubmit="osf(this);" target="_self" id="SetMobileOn_frm" name="SetMobileOn_frm" method="post" action="spsform">
<input type="hidden" value="GKNNUVEDPL" id="FormState" name="FormState">
<div class="klonline-tab-outer" id="tab_setmobileon_div"><div class="klonline-tab-inner" id="tab_setmobileon0_div"><table class="klonline-form-table">
<tbody><tr>
<td></td>
<td>
<div class="nt-form-div nt-left" id="setmobileon_loc__setmobileon_value_div"><button onclick="location.href='WelcomePage?_mobile_=1'" class="SetMobileOnButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="View Mobile Site" id="Set_Mobile_Mode_OnFBYA" name="Set_Mobile_Mode_On" type="button" role="button" aria-disabled="false"><span class="ui-button-text">View Mobile Site</span></button>
<script defer="defer">
jQuery(function() {jQuery("#Set_Mobile_Mode_OnFBYA").button();});

</script>
</div>
</td>
<td><div class="nt-form-div nt-comment nt-formcell" id="setmobileon_loc__setmobileon_comment_div"></div>
</td>
</tr>
</tbody></table>
</div>
</div>
<div class="" id="SetMobileOn_saveset"></div>
</form>
<script defer="defer">
jQuery(function() {jQuery("#SetMobileOn_frm").ntform({procedure: "setmobileon",tabType:6, action: "spsform",actionCancel: "spsform",actionCancelTarget: "",actionTarget: "_self",popup:0});});

</script>
</div>
</div>
<script defer="defer">
jQuery(document).ready( function(){jQuery('#PRO__GivenNames').focus();});
</script>
</div>

The field 'PRO_GivenNames' may be hidden depending on a variable for the record.

Second question: Is there a way to do a 'ScrollTo' instead of a 'Focus', or turn 'Focus' off and just have 'ScrollTo', as I would like every page to start at the top of the page, not at the top of a form or browse. Loading to the top of a form or browse means the user always has to scroll up to see the Header and Menu.

I'm using Nettalk v6.52.

Regards,
Trent

[Bruce]

You can google around a bit, but I'm not aware of any "scroll to top" feature.
you best approach is probably to move your "mobile" button into the header, not the footer.

cheers
Bruce

[trent]

There are lots of topics on it, usually people are saying to add this to the page:

$(window).scrollTop(0);

or

$(document).scrollTop(0);

or

$(document).ready(function () {
        window.scrollTo(0,0);

Would you know where I could try putting this javascript in to test this? Maybe a specific embed point?

Regards,
Trent

[Bruce]

in your footer (or header) you could try the following;

p_web.Script('$(window).scrollTop(0);')

Cheers
Bruce

[trent]

Thanks Bruce. I've tried putting that in both the Header and Footer procedures 'After All Code' embed but didn't work. Firebug showed that the lines:

<script defer="defer">
jQuery(document).ready( function(){jQuery('#PRO__GivenNames').focus();});
</script>

...still showed after the 'After All Code' embed of the Footer procedure. Is there any way that I can put the 'scrollTop' code that would go after the above script? Or I could try to put a 'blur()' after the above script.

Also my second question: Is there a way to do a 'ScrollTo' instead of a 'Focus', or turn 'Focus' off and just have 'ScrollTo', as I would like every page to start at the top of the page, not at the top of a form or browse. Loading to the top of a form or browse means the user always has to scroll up to see the Header and Menu.

Regards,
Trent

[trent]

bump

[Bruce]

Hi Trent,

I guess the short answer is, I don't know.
Probably the best approach is to set up an example app to show the effect. My guess it that the button in the footer is part of the problem, and maybe the length of the form is another.
So grab one of the examples, and set up a test. Then I can experiment with that a bit to see what happens.

cheers
Bruce

[trent]

I got this working in the end. Added this to the XHTML in the PageHeaderTag procedure:

<script>
$( window ).load(function() {
  window.scrollTo(0,0);
});
</script>

Regards,
Trent

[Bruce]

cool - thanks for sharing Trent.

cheers
Bruce

[trent]

You're welcome