"Reprint" [JS] to keep the form submitted after the return to the original location

Last Update:2014-07-19 Source: Internet

Author: User

Tags setcookie

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Sometimes, in the page to click on the page button or refresh the page, the page scroll bar will return to the top, want to see the back of the record and then drag the scroll bar, or to press the page key, very inconvenient, want to submit the page or in the pages when the refresh still keep the position of the scroll bar unchanged, the best way is In JS, a cookie is used to record the position of the current scroll bar, and then it can be realized by reading the cookie when it is refreshed.
The code is as follows:
<script type= "Text/javascript" >
function Trim (strvalue)
{
Return Strvalue.replace (/^s*|s*$/g, "");
return strvalue;
}

function Setcookie (sname,svalue)
{
Document.cookie = sName + "=" + Escape (svalue);
}

function GetCookie (sName)
{
var acookie = Document.cookie.split (";");
for (var i=0; i < acookie.length; i++)
{
var acrumb = acookie[i].split ("=");
if (SName = = Trim (acrumb[0]))
{
Return unescape (acrumb[1]);
}
}

return null;
}

function Scrollback ()
{
if (GetCookie ("scroll")!=null) {Document.body.scrolltop=getcookie ("scroll")}
}
</script>
Then set the <body id=body onscroll=setcookie ("scroll", DOCUMENT.BODY.SCROLLTOP) in the HTML page; Onload= "Scrollback ();" > The position of the scroll bar can remain unchanged after the refresh or commit.

If not, modify the following: Document.body.scrollTop modified to Document.documentElement.scrollTop

When you develop Web pages with ASP, you will find that if you set up a page, if you have more than one button in it, and the page is very long.
When you click on the button and then postback, the page always appears on top, which is extremely inconvenient.

But the following code, write to help you solve the problem.

<input type= "Submit" Name= "Button1" value= "button" id= "Button1"/>
<input type= "hidden" id= "window_offsety" name= "window_offsety" value= "0" >
<input type= "hidden" id= "Window_offsetx" name= "Window_offsetx" value= "0" >

<script language= "Javascript" >
var ua = Navigator.userAgent.toLowerCase ();
var Isie = (ua.indexof (' msie ')! =-1 &&!this.isopera && (ua.indexof (' webtv ') = =-1));

function Window_onsubmitie () {
document.getElementById ("Window_offsety"). Value = Window.event.offsety-window.event.clienty + 2;
document.getElementById ("Window_offsetx"). Value = Window.event.offsetx-window.event.clientx + 2;
}

function Window_onsubmitns (event) {
document.getElementById ("Window_offsety"). Value = Event.pagey-event.clienty;
document.getElementById ("Window_offsetx"). Value = Event.pagex-event.clientx;
}

if (!isie) {
Document.forms[0].addeventlistener (' Submit ', window_onsubmitns, false);
}
else{
Document.forms[0].attachevent (' onsubmit ', window_onsubmitie);
}

function Lili1_onload () {
Window.scrollto (0,1431);
}

if (!isie) {
Window.addeventlistener (' Load ', lili1_onload, false);
}
else{
Window.attachevent (' onload ', lili1_onload);
}
</script> document.body.ScrollTop is always 0 reasons

Recently wrote a drag layer of HTML page, need to get the scroll bar current position.

So I used document.body. ScrollTop gets the position of the Y-direction scroll ... Strange things have come up! No matter how the scroll bar scrolls,document.body. ScrollTop has always been 0!

Compare a previously written page. Found the difference is very small. The old page is fine. That's weird.

I started the 1.1-point exclusion and removed more code. Until I remove the top of the document

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

The page is only normal at this time.

Originally this line of things caused IE can't get document.body. scrolltop!

It will be OK to delete the top two lines. But why is it so?

Google for a moment, found to change to:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

On it, but the page slightly changed, feel uncomfortable, so again in Google, finally resolved:

var Scrollpos;
if (typeof window.pageyoffset! = ' undefined ')
{
Scrollpos = Window.pageyoffset;
}
else if (typeof document.compatmode! = ' undefined ' && document.compatmode! = ' Backcompat ')
{
Scrollpos = Document.documentElement.scrollTop;
}
else if (typeof document.body! = ' undefined ')
{
Scrollpos = document.body. scrolltop;
}
alert (Scrollpos);

document.body. ScrollTop
To change into
Document.documentElement.scrollTop

About the reason that Document.body.scrollTop cannot return the correct value in JS

It was originally intended to get the pixels of the browser's vertical scroll bar scrolling down through DOCUMENT.BODY.SCROLLTOP, but regardless of where the scrollbar always returned is 0, the reason for this is related to the header declaration of the HTML, if the header is declared as: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd", so it's sure to get the result 0, if this is <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > to get the right results, for the first header declaration want to scroll the height of the scrollbar, there are two ways to solve

1, var Scrollpos;

if (typeof window.pageyoffset! = ' undefined ') {
Scrollpos = Window.pageyoffset;
}
else if (typeof document.compatmode! = ' undefined ' && document.compatmode! = ' Backcompat ') {
Scrollpos = Document.documentElement.scrollTop;
}
else if (typeof document.body! = ' undefined ') {
Scrollpos = Document.body.scrollTop;
}

2, replace Document.body.scrollTop with Document.documentElement.scrollTop

JS control where form forms are submitted

if (Document.myform.keytext.value = = "") {
Alert ("Query keyword not filled!\n\n please check!");
Document.myform.keytext.focus ();
return false;
}

if (Document.myform.cl.value = = 1)
{
document.myform.action= "yqjsj.asp?keytext=" +myform.keytext.value;
Document.myform.submit ();
}
else if (Document.myform.cl.value = = 2)
{
document.myform.action= "sjzz.asp?keytext=" +myform.keytext.value;
Document.myform.submit ();
}
else if (Document.myform.cl.value = = 3)
{
document.myform.action= "gjhc.asp?keytext=" +myform.keytext.value;
Document.myform.submit ();
}
else if (Document.myform.cl.value = = 4)
{
document.myform.action= "jyjqr.asp?keytext=" +myform.keytext.value;
Document.myform.submit ();
}
}
</script>

var ofix = document.getElementById ("Divfix");

OFix.style.top = Document.documentElement.scrollTop + "px";

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More