Click here to Skip to main content
Click here to Skip to main content

Scroll to previously in focus element on the page

, 19 Aug 2006
Rate this:
Please Sign up or sign in to vote.
Scroll to the element previously in focus on the page when the same page returns from the server.

Introduction

When the same page returns from the server, how do we scroll to the previously in focus element on the page? Example: If selecting a value from the dropdown placed way below on a page refreshes the page, by default the first field will receive the focus or scroll position set to zero. It forces the user to scroll down to the previous position and causes a lot of frustration.

With simple hidden fields, we can come back to the same position and set the focus on the same field or the next field. This will allow the user to continue from the place where they left off.

Add two hidden fields under the FORM tag:

<input type=&quot;hidden&quot; name = &quot;previousElement&quot;>
<input type=&quot;hidden&quot; name = &quot;previousScrollPosition&quot;>

Add this JavaScript code under the script tag or in your .js file:

function sendScrollPosition() {
    document.forms[0].elements[&quot;previousScrollPosition&quot;].value = 
      document.body.scrollTop;
    return true;
} 
function setfocuselement(ele){
    if(document.forms[0] == null) return false;
    if(document.forms[0].elements[&quot;previousElement&quot;] != null) {
        document.forms[0].elements[&quot;previousElement&quot;].value=
          ele.name || event.srcElement.name;
    }
}

if(document.getElementsByName(&quot;previousScrollPosition&quot;).length > 0) {


    document.body.scrollTop = 
      document.forms[0].elements[&quot;previousScrollPosition&quot;].value;
}

var prvElement= document.forms[0].elements[&quot;previousElement&quot;];

if(prvElement != null && prvElement.value != null ) {

    document.forms[0].elements[prvElement.value].focus();
}

When you submit the page, you need to call these two JavaScript functions. You can add these JavaScript functions to the onchange, onblur, or onclick events and finally submit the page to the server.

Server Side

When you render the ASP or JSP page, you need to take both the previousScrollPosition, previousElement values from the Request object and populate both the hidden fields.

<form action=&quot;demo_form2.asp&quot; method=&quot;post&quot;>
First name:
<input type=&quot;text&quot; name=&quot;name&quot; value=&quot;Donald&quot; />
<br />
Last name:
<input type=&quot;text&quot; name=&quot;name&quot; value=&quot;Duck&quot; />
<br />

<input type=&quot;hidden&quot; name = &quot;previousElement&quot; 
  value=&quot;<%Request.Form(&quot;previousElement&quot;)%>&quot;> 
<input type=&quot;hidden&quot; name = &quot;previousScrollPosition&quot; 
  value=&quot;<%Request.Form(&quot;previousScrollPosition&quot;)%>&quot;>
<input type=&quot;submit&quot; value=&quot;Submit&quot; />
</form>

You need to make sure that the form fields are available in the FORM before calling or using the JavaScript functions.

If you have multiple fields with the same name, then you need to send the index of the field to the server and get the field list using the document.getElementsbyName("elementName") function and loop through it to select the correct index and set the focus.

Setting focus on the next element or skipping hidden or disabled fields while doing setfocus is a complex JavaScript action. I will show it in a different article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

senthil karuppaiah
Web Developer
United States United States
Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.

Comments and Discussions

 
GeneralPosition scrollbar of a div PinmemberMember #37883142-Feb-07 0:24 
Generalcrossbrowser Pinmemberueli.kunz23-Aug-06 20:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 19 Aug 2006
Article Copyright 2006 by senthil karuppaiah
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid