Unable to find working code to remember page scroll position

Twinbird · December 9, 2013

Hello,

I've searched for a while now and can't find a working solution for my web app. I have a PHP web app with a bunch of include statements (this should be irrelevant) that can generate a page with a large height. When a user refreshes the page or clicks a submit button on the form (at the bottom of the page), I want the page to appear at the same scroll position when it reloads.

A couple of things I've tried (but failed):

http://blog.crondesign.com/2009/09/scrollfix-remember-scroll-position-when.html

http://stackoverflow.com/questions/12744145/how-to-remember-scroll-position-o-page

Any suggestions? I'm not sure why these aren't working for me.

.josh · December 10, 2013

Not sure how you expect us to help you without posting any of your code or a link to the page in question.. providing some links to code you've tried doesn't help us help you. Also, saying "it doesn't work" doesn't really help us help you. You'll have to try and be more specific. On a side note, have you considered submitting your form via AJAX, so the page doesn't have to reload at all? That way you won't even need to worry about remembering scroll position.

Twinbird · December 10, 2013

I just threw this post up here before I left work. Here is the source code for the page (implementing the jQuery solution, which isn't working for me):

<!DOCTYPE html>
<html>
<head>
	<title>My web page</title>

	<!--========== CSS ==========-->
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
	<link rel="stylesheet" type="text/css" href="css/buttons.css" />
	<!--[if gte IE 9]>
		<style type="text/css">
			.gradient
			{
				filter: none;
			}
		</style>
	<![endif]-->
	<!--========== /CSS ==========-->

	<script src="jquery-1.10.2.min.js"></script>
	<script src="jquery.cookie.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

	    // If cookie is set, scroll to the position saved in the cookie.
	    if ( $.cookie("scroll") !== null ) {
	    	$(document).scrollTop( $.cookie("scroll") );
	    }

	    // When scrolling happens....
	    $(window).on("scroll", function() {

	        // Set a cookie that holds the scroll position.
	        $.cookie("scroll", $(document).scrollTop() );

	    });

	});
	</script>
</head>

<body>
	<div class="wrapper">
		<!--========== The header ==========-->
		<div class="header">
			<div style="background-color:black;width:100%;height:70px;margin:auto;max-width:1010px;">
				<div class="uimage"><img src="images/logo-white.png" alt="White Logo" /></div>
				<span class="titleS"><b>|</b> My Web Application<br><span class="titleSsub">Visit Day: Thursday, March 8th</span></span>
				<span class="rightMenu menuLink">
					Logged in as <u>Smith, John</u><span style="color:grey;"> | </span>
					<a href="http://example.com" target="_blank">Wiki Page</a><span style="color:grey;"> | </span><a href="" target="_self">Logout</a>
				</span>
			</div>
			<div style="height:5px; width:100%;background-color:#FECB00;margin:auto;max-width:1010px;"></div>
		</div>
		<!--========== /The header ==========-->

		<div class="content">		
			<a class="inactive"
			href="?page=options" target="_self">1 Preferences</a>

			<a class="button"
			href="?page=student" target="_self">2 Preferences</a>

			<a class="button"
			href="?page=lab" target="_self">3 Preferences</a>

			<a class="button"
			href="?page=admin" target="_self">User Admin</a>

			<a class="button"
			href="?page=schedule" target="_self">Settings</a>
		
			<br><br>

			<h1>1 preferences</h1>

			<form method="post">
				<label>Select the professor you would like to view:</label>
				<select name="user">
					<option selected value="1">Fehér Liüntika</option>
					<option  value="2">Álmos Árpád</option>
					<option  value="3">Nagy Tibor</option>
					<option  value="4">Erős Pista</option>
					<option  value="5">Erős Róbert</option>
					<option  value="6">Szabó Bálint</option>
				</select>
				<input type="submit" value="Set user">
			</form>

		<div class="userHighlight">

			<form method="post">
			<span>» Fehér Liüntika</span>
			<br><br><br>
			<label>Number of something:</label>
			<select name="group_number">
				<option  value="0">0</option>
				<option  value="1">1</option>
				<option  value="2">2</option>
				<option selected value="3">3</option>
			</select>

			<br><br><br>

			<label>Select the time(s) the professor is available for a meeting:</label><br><br>
			<table>
				<thead>
					<tr>
						<th style="visibility: hidden;"></th>
						<th>Time Slot</th>
					</tr>
				</thead>
				<tbody>
					<tr class="interested" >
						<td><input type="checkbox" name="user_time[]" value="1" checked ></td>
						<td>time1</td>
					</tr>
					<tr class="interested" >
						<td><input type="checkbox" name="user_time[]" value="2" checked ></td>
						<td>time2</td>
					</tr>
					<tr class="interested" >
						<td><input type="checkbox" name="user_time[]" value="3" checked ></td>
						<td>time3</td>
					</tr>
				</tbody>
			</table>

			<br><br><br>

	<label>Select the students:<br>
		<span style="font-size: 11px;">(<span style="color: red;">♥</span> = student is interested in meeting with you)</span></label><br><br>
	<table>
		<thead>
			<tr>
				<th style="visibility: hidden;"></th>
				<th>Student</th>
				<th>Research</th>
				<th style="visibility: hidden;"></th>
			</tr>
		</thead>
		<tbody>
						<tr class="interested-i"  >

				<td>
					<input checked type="radio" name="user_student[1]" value=""> Not interested<br>
					<input  type="radio" name="user_student[1]" value="1"> Individual<br>
					<input checked type="radio" name="user_student[1]" value="0"> Group<br>
				</td>

				<td>student1</td>
				<td></td>

				<td style="background: none;"><span style="color: red;">♥</span></td>

			</tr>
						<tr  >

				<td>
					<input checked type="radio" name="user_student[2]" value=""> Not interested<br>
					<input  type="radio" name="user_student[2]" value="1"> Individual<br>
					<input  type="radio" name="user_student[2]" value="0"> Group<br>
				</td>

				<td>student2</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
						<tr 				class="interested"
			 >

				<td>
					<input  type="radio" name="user_student[3]" value=""> Not interested<br>
					<input checked type="radio" name="user_student[3]" value="1"> Individual<br>
					<input  type="radio" name="user_student[3]" value="0"> Group<br>
				</td>

				<td>student3</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
						<tr 				class="interested"
			 >

				<td>
					<input  type="radio" name="user_student[4]" value=""> Not interested<br>
					<input checked type="radio" name="user_student[4]" value="1"> Individual<br>
					<input  type="radio" name="user_student[4]" value="0"> Group<br>
				</td>

				<td>student4</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
						<tr class="interested-i"  >

				<td>
					<input checked type="radio" name="user_student[5]" value=""> Not interested<br>
					<input  type="radio" name="user_student[5]" value="1"> Individual<br>
					<input checked type="radio" name="user_student[5]" value="0"> Group<br>
				</td>

				<td>student5</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
						<tr  >

				<td>
					<input checked type="radio" name="user_student[6]" value=""> Not interested<br>
					<input  type="radio" name="user_student[6]" value="1"> Individual<br>
					<input  type="radio" name="user_student[6]" value="0"> Group<br>
				</td>

				<td>student6</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
						<tr  >

				<td>
					<input checked type="radio" name="user_student[7]" value=""> Not interested<br>
					<input  type="radio" name="user_student[7]" value="1"> Individual<br>
					<input  type="radio" name="user_student[7]" value="0"> Group<br>
				</td>

				<td>student7</td>
				<td></td>

				<td style="background: none;"></td>

			</tr>
					</tbody>
	</table><br>

	<input name="form_submitted" style="padding: 5px 10px; margin-top:20px;" type="submit" value="Save">
</form>
</div>
		</div>
	</div>

</body>
</html>

I tested this solution using a static HTML page and it worked. So I'm not sure why it's not working with my PHP app. I get no errors on the page and I checked my code using W3C's Markup Validation Service (http://validator.w3.org).

I'm assuming it could be something to do with the fact that all pages are being loaded through index.php using include statements that get data from the query string. So each page would actually look something like this:

myserver.example.com/webapp/index.php?page=preferences1

or

myserver.example.com/webapp/?page=preferences1

I'll look into using AJAX - but I will need it to refresh the html elements on the page, since the form will cause data to be added to my database which must be reflected in the html.

Thanks for your reply josh.

Twinbird · December 11, 2013

So AJAX is not exactly what I want. There are certain times when the page will need to be refreshed, or when the user might refresh the page, during which a form is not submitted.

I just tried this solution as well:

http://stackoverflow.com/questions/7577897/javascript-page-reload-while-maintaining-current-window-position

... but it didn't work. I really have no clue why.

Any suggestions guys? :happy-04:

nogray · December 12, 2013

try $(window).scrollTop() instead of $(document)

Twinbird · December 18, 2013

Thanks for your suggestion nogray. Unfortunately, I still can't get it working

Twinbird · December 18, 2013

Working with ~~Chrome Developer Tools~~ and Firefox Firebug, I noticed that the jQuery code is not actually setting a cookie :/ The only cookie being set is "PHPSESSID" for my PHP session. Once again, there are no errors on the page and my HTML is valid.

Edit: Sorry, I see there is a cookie being set in Chrome Developer Tools. However, the value it contains is always 0 ...

Also, when running "$.cookie("scroll", $(document).scrollTop() );" or "$.cookie("scroll", $(window).scrollTop() );" in the Chrome Developer Tools console, I get "scroll=0" as the output, regardless of where I am on the page. I don't get it ...

This is the JS code in my head tag:

	<script src="jquery.min.js"></script>
	<script src="jquery.color.js"></script>
	<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
	<script src="jquery.cookie.js"></script>

	<script type="text/javascript">
	// When document is ready...
	$(document).ready(function() {

	    // If cookie is set, scroll to the position saved in the cookie.
	    if ( $.cookie("scroll") !== null ) {
	        $(document).scrollTop( $.cookie("scroll") );
	    }

	    // When scrolling happens....
	    $(window).on("scroll", function() {

	        // Set a cookie that holds the scroll position.
	        $.cookie("scroll", $(document).scrollTop() );

	    });

	});
	</script>

Any more suggestions?

Edited December 18, 2013 by Twinbird

Twinbird · December 18, 2013

I found my problem ...

The issue was caused by my CSS. My "wrapper" class (applied to a div in the body) had "overflow-y: auto;". I removed this and now things are working! Hooray!

Sign In

Unable to find working code to remember page scroll position

Recommended Posts

Twinbird

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

Twinbird

Link to comment

Share on other sites

Twinbird

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

Twinbird

Link to comment

Share on other sites

Twinbird

Link to comment

Share on other sites

Twinbird

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information