asked on

Force page scroll position to top at page refresh in ASP.Net

Hello Experts,
I have a webpage. It is validated upon click on the Submit button. If there are errors, I display them in the top of the page. I want the user to see the error messages and fix them. But my page does not scroll to the top. The position stays somewhere in the middle. Is there a way I can force the screen scroll the page to top? FYI, this is done in C# and ASP.Net under Visual Studio 2013 environment. Please try to help. Thank you in advance.

Note: I would prefer not to use Javascripts if possible...

Thank you!

jitendra patil

I would suggest using javascript function, it the best possible to work with.
create a javascript function as below

function ToTopOfPage() {
            window.scrollTo(0, 0);
        }

Open in new window

and in the cs page on the button click event if you find any error write the below line of code from Code behind
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(),"ToTheTop", "ToTopOfPage();", true);

this way you can achieve your goal.

HTH

RadhaKrishnaKiJaya

ASKER

Hello Jitendra
I am getting "Error: 'ToTopOfPage' is undefined" error. I created the JS function and added the "ScriptManager...." at the end of my button event as below. Please let me know what I am missing.

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

protected void btnSaveForm_Click(object sender, EventArgs e)
{
.
.
.
.
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(), "ToTheTop", "ToTopOfPage();", true);
}

Thank you!

jitendra patil

The error says it is not able to find the java script function you created, make sure your javascript function is there on the page.

in the developer console please check if the java script function you are trying to access is loaded or not.

RadhaKrishnaKiJaya

ASKER

Even I tried this, but nothing happens.

ScriptManager.RegisterStartupScript(this, GetType(), "YourUniqueScriptKey", "window.scrollTo(0, 0);", true);

jitendra patil

can you share the sample code you have created?

RadhaKrishnaKiJaya

ASKER

Unfortunately, because of company policy I will not be able to share the code.

RadhaKrishnaKiJaya

ASKER

Here is sample code. Please see if you can fix this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

</head>
<body>
<form id="form" runat="server">
<div id="content">
<div class="form_table">
<table>
<tr>
<div id="wrapper">

<div id="header">
<div id="nav"><a href="index.html">Home</a> | <a href="#">About Me</a> | <a href="#">Contact Me</a> | <a href="#">My Photos</a> | <a href="#">My Videos</a></div>
<div id="bg"></div>
</div>

<div id="left-column">
<div id="logo">
Welcome to Michael Scott's Webpage
</div>
<div class="box">
<h1>What You'll Find Here</h1>
<p>This is my space. Here are some of my interests: </p>
<ul style="margin-top: 10px;">
<li>Saying "That's what she said"</li>
<li>Writing song parodies</li>
<li>Playing ice hockey</li>
<li>Wearing jeans</li>
<li>Chrysler cars</li>
</ul>
</div>
<h2>A Few of My Famous Quotes</h2>
<p>
<img src="http://img189.imageshack.us/img189/9177/paperru.jpg
"
width="139" height="150" style="margin: 0 10px 10px 0; float: left;" />
<em>"That's what she said."</em> - Me<br />
<em>"Would I rather be feared or loved? Easy, both. I want people to be afraid of how much they love me."</em> - Me<br />
<em>"Wikipedia is the best thing ever. Anyone in the world can write anything they want about any subject, so you know you are getting the best possible information."</em> - Me<br />
<em>"I am Michael, and I am part English, Irish, German, and Scottish, sort of a virtual United Nations."</em> - Me<br />
</p>
</div>
<div id="right-column">
<div id="main-image">
<img src="http://img38.imageshack.us/img38/7065/michaelscotto.jpg
"
width="160" height="188" />
</div>
<div class="sidebar">
<h3>Blurb About Me</h3>
<p>My name is Michael Scott. And I love Dunder Mifflin and Dwight Schrute.</p>
<h3>Find Me Elsewhere</h3>
<div class="box">
<ul>
<li><a href="http://facebook.com" target="_blank">Facebook</a></li>
<li><a href="http://twitter.com" target="_blank">Twitter</a></li>
<li><a href="http://linkedin.com" target="_blank">LinkedIn</a></li>
<li><a href="http://tumblr.com" target="_blank">Tumblr</a></li>
<li><a href="http://pinterest.com" target="_blank">Pinterest </a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
Copyright © 2012 Michael Scott. All rights reserved.<br />
Layout adapted from <a href="http://www.web-designers-directory.org/" target="_blank">Web Designers' Directory</a>.
</div>

<td colspan="2">
<div align="center" style="margin: auto; padding: 10px;">
<asp:Button ID="btnSaveForm" runat="server" OnClick="btnSaveForm_Click" CausesValidation="false" class="ibutton" Text="Save" Width="80px" />
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnSaveForm_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(), "ToTheTop", "ToTopOfPage();", true);
}
}

ASKER CERTIFIED SOLUTION

RadhaKrishnaKiJaya

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RadhaKrishnaKiJaya

ASKER

Full credit goes to Huseyin KAHRAMAN.