Click here to Skip to main content
11,798,046 members (78,310 online)
Click here to Skip to main content

Crossbrowser SmartNavigation Alternative

, 3 Dec 2004 109.4K 522 37
Rate this:
Please Sign up or sign in to vote.
An article on how to create a server control that preserves the scroll position in longer pages.


One of the features of SmartNavigation is preserving the scroll position in longer pages. However, SmartNavigation only works with Internet Explorer. And another issue is, using SmartNavigation may cause some JavaScript errors.

As a web developer, I need to preserve scroll position in longer pages to prevent the visitor be lost in the page.

So, I came with an idea of a cross browser server control to maintain the scroll position in postbacks.

Using the code

Import the required assemblies:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

The control derives from the base Control class to participate in the HTTP request/response processing provided by the page framework.

namespace Uludag
public class Lili : Control {
    public Lili(){

The control overrides the inherited Render method to write to the output text stream.

protected override void Render(HtmlTextWriter writer){

My approach is to add an event to the OnSubmit event of the form. This event assigns the positions of the source of the event to hidden values. Declare hidden values:

writer.Write("<input type=\"hidden\" id=\"" + 
       this.ID + "_OffsetY\" name=\"" + this.ID + "_OffsetY\" value=\"0\">\n");
writer.Write("<input type=\"hidden\" id=\"hidden\"" + 
       this.ID + "_OffsetX\" name=\"" + this.ID + "_OffsetX\" value=\"0\">\n");

Then detect the user browser.

writer.Write("<script language="\""Javascript\">\n");
writer.Write("var ua = navigator.userAgent.toLowerCase();\n"); 
writer.Write("var isIE = (ua.indexOf('msie') != -1 && 
       !this.isOpera && (ua.indexOf('webtv') == -1) );\n");

attachEvent is used to bind the specified function to an event in Internet Explorer. For the other browsers, addEventListener is used. Define function for OnSubmit event for Internet Explorer.

  • window.event.offsetY sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
  • window.event.clientY sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
  • window.event.offsetX sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
  • window.event.clientX sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
writer.Write("function " + this.ID + "_OnSubmitIE(){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetY\").value = window.event.offsetY - window.event.clientY + 2;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
   "_OffsetX\").value = window.event.offsetX - window.event.clientX + 2 ;\n");

Define function for OnSubmit event for browsers other than Internet Explorer.

  • event.pageY returns the vertical coordinate of the event relative to the visible page.
  • event.clientY returns the vertical position of the event bars.
  • event.pageX returns the horizontal coordinate of the event relative to the page.
  • event.clientX returns the horizontal position of the event bars.
writer.Write("function " + this.ID + "_OnSubmitNS(event){\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetY\").value = event.pageY - event.clientY;\n");
writer.Write("document.getElementById(\"" + this.ID  + 
     "_OffsetX\").value = event.pageX - event.clientX;\n");

Add the events to the form:

writer.Write("if (!isIE){\n");
             + this.ID  + "_OnSubmitNS, false);\n");
writer.Write("document.forms[0].attachEvent('onsubmit'," + 
                            this.ID  + "_OnSubmitIE);\n");

If PostBack, add an OnLoad event to scroll to the source of the event.

if (Page.IsPostBack ){
    writer.Write("function " + this.ID + "_OnLoad(){\n");
    writer.Write("window.scrollTo(" +  Page.Request.Form[this.ID + 
                 "_OffsetX"]+ "," + 
                 Page.Request.Form[this.ID + "_OffsetY"] + ");\n");
    writer.Write("if (!isIE){\n");
    writer.Write("window.addEventListener('load'," + 
                 this.ID  + "_OnLoad, false);\n");
    writer.Write("window.attachEvent('onload'," + this.ID  + "_OnLoad);\n");

End the script and render. Close the parenthesis.


I have tested this on Internet Explorer 6.0, FireFox 1.0 and Netscape 7.2.

Adding this control to Visual Studio

To add this control to your toolbox on Visual Studio, right click on your toolbox, and click on Add/Remove Items.

Then locate the Lili.dll:

Make sure that Lili is checked.

Then Lili is seen on your toolbox.

All you have to do is just drag and drop Lili to your page.

I hope this helps somebody out there, I would be interested in receiving any bug fixes for other browsers, enhancements etc.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Turkey Turkey
Ibrahim ULUDAG
Software Developer

You may also be interested in...

Comments and Discussions

Generalgood example Pin
krishnaclc3-Apr-07 6:20
memberkrishnaclc3-Apr-07 6:20 
Generalhidden fields Pin
pavlyku31-Jan-07 2:50
memberpavlyku31-Jan-07 2:50 
GeneralASP.NET 2.0 has MaintainScrollPositionOnPostback Pin
MarcSchluper22-Sep-06 8:45
memberMarcSchluper22-Sep-06 8:45 
GeneralRe: ASP.NET 2.0 has MaintainScrollPositionOnPostback Pin
Riza Azmi18-Jan-07 16:52
memberRiza Azmi18-Jan-07 16:52 
GeneralGood job - thnx Pin
marcin.rawicki18-Sep-06 3:12
membermarcin.rawicki18-Sep-06 3:12 
GeneralJavascript problems with smartnavigation Pin
Talal Sultan15-May-06 1:49
memberTalal Sultan15-May-06 1:49 
GeneralThank You Pin
DignityCentral14-Jan-06 11:27
memberDignityCentral14-Jan-06 11:27 
AlejoFC13-Jan-06 4:26
memberAlejoFC13-Jan-06 4:26 
GeneralGreat Control Pin
CodeNameHar5-Jan-06 10:15
memberCodeNameHar5-Jan-06 10:15 
Generalflickering Pin
jsbroker24-Nov-05 2:52
memberjsbroker24-Nov-05 2:52 
QuestionNEWBIE Pin
marcoscavaleiro3-Nov-05 6:41
membermarcoscavaleiro3-Nov-05 6:41 
GeneralDoesn't work with AutoPostBack Pin
dj4uk21-Sep-05 23:42
memberdj4uk21-Sep-05 23:42 
GeneralRe: Doesn't work with AutoPostBack Pin
ibrahimuludag22-Sep-05 9:38
memberibrahimuludag22-Sep-05 9:38 
GeneralRe: Doesn't work with AutoPostBack Pin
dj4uk22-Sep-05 21:55
memberdj4uk22-Sep-05 21:55 
GeneralA sugesstion . . . Pin
TyP14-Sep-05 4:52
sussTyP14-Sep-05 4:52 
GeneralRe: A sugesstion . . . Pin
ibrahimuludag22-Sep-05 9:40
memberibrahimuludag22-Sep-05 9:40 
GeneralRe: A sugesstion . . . Pin
TyP4-Oct-05 4:03
memberTyP4-Oct-05 4:03 
QuestionCan't get it to work?? Pin
Assimalyst9-Sep-05 5:42
memberAssimalyst9-Sep-05 5:42 
AnswerRe: Can't get it to work?? Pin
ibrahimuludag22-Sep-05 9:41
memberibrahimuludag22-Sep-05 9:41 
GeneralRe: Can't get it to work?? Pin
Assimalyst26-Sep-05 0:16
memberAssimalyst26-Sep-05 0:16 
Generaldont want Back using Backspace Button Pin
Anonymous17-Aug-05 23:42
sussAnonymous17-Aug-05 23:42 
GeneralReally cool Pin
UV20035-Aug-05 14:11
memberUV20035-Aug-05 14:11 
GeneralRe: Really cool Pin
ibrahimuludag7-Aug-05 12:08
memberibrahimuludag7-Aug-05 12:08 
GeneralRe: Really cool Pin
UV20039-Aug-05 9:48
memberUV20039-Aug-05 9:48 
GeneralEllerine saglik Pin
argos40418-Jul-05 11:58
memberargos40418-Jul-05 11:58 
GeneralRe: Ellerine saglik Pin
ibrahimuludag7-Aug-05 12:05
memberibrahimuludag7-Aug-05 12:05 
Generalslight mis-navigation Pin
skeps23-May-05 0:01
memberskeps23-May-05 0:01 
GeneralRe: slight mis-navigation Pin
ibrahimuludag5-Jun-05 11:40
memberibrahimuludag5-Jun-05 11:40 
GeneralAm I doing something wrong here Pin
shelly_ski17-Feb-05 15:34
membershelly_ski17-Feb-05 15:34 
GeneralRe: Am I doing something wrong here Pin
ibrahimuludag3-Apr-05 5:19
memberibrahimuludag3-Apr-05 5:19 
GeneralLinkButton not supported Pin
Marc Schluper16-Feb-05 5:22
sussMarc Schluper16-Feb-05 5:22 
GeneralRe: LinkButton not supported Pin
ibrahimuludag3-Apr-05 5:18
memberibrahimuludag3-Apr-05 5:18 
GeneralRe: LinkButton not supported Pin
MarcSchluper8-Apr-05 5:15
memberMarcSchluper8-Apr-05 5:15 
GeneralI'm confused Pin
Hockey4-Dec-04 21:53
memberHockey4-Dec-04 21:53 
GeneralRe: I'm confused Pin
ibrahimuludag4-Dec-04 23:13
memberibrahimuludag4-Dec-04 23:13 
GeneralRe: I'm confused Pin
Patrick Long17-Jan-05 11:58
memberPatrick Long17-Jan-05 11:58 
GeneralRe: I'm confused Pin
ibrahimuludag17-Jan-05 12:05
memberibrahimuludag17-Jan-05 12:05 
GeneralRe: I'm confused Pin
Anonymous5-Apr-05 13:55
sussAnonymous5-Apr-05 13:55 
GeneralRe: I'm confused Pin
Hockey5-Apr-05 14:00
memberHockey5-Apr-05 14:00 

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 | Terms of Use | Mobile
Web03 | 2.8.151002.1 | Last Updated 3 Dec 2004
Article Copyright 2004 by ibrahimuludag
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid