Overflow:Hidden -> PHP DIV scroll? - php

Question

So I have a website that navigates by scrolling through a pane of DIVs that's wrapped inside a main DIV via. JQuery/javascript: http://plugins.jquery.com/project/ScrollTo
E.g.
<div id="content" style:"overflow:hidden; width 800px;">
<div id="home" class="page"></div>
<div id="about" class="page"></div>
<div id="support" class="page"></div>
</div>
It navigates and scrolls fine, but attempting to provide dynamic URLs for the pages without breaking the scrolling feature (e.g. mywebsite.com?p=home) brings a bit of trouble.
So depending on what the GET request returns, I want the PHP script to automatically set the scroll position on page load; as the scroll bars are hidden, and can only be set via. javascript.
What is the best method for this?

Answer 1

Probably something like this
<script>
var goTo = '<?php echo (isset($_GET['p']) ? $_GET['p'] : "default_value"); ?>';
(function($){
$(document).ready(function(){
functionThatScrolls(goTo);
});
}(jQuery));
<script>
I would do it like this, just print the value of the $_GET['p'] into the script, just make sure to print a default value, and maybe sanitize the value of p someone could insert something into it.
hope it helped.

Answer 2

May I suggest simply using plain old anchor tags?
The way you've described your site doesn't seem to need all this js magic in order to achieve the effect you're looking for...
<div>
<a name="home">
<div>
</div>
</a>
<a name="pix">
<div>
</div>
</a>
<a name="about us">
<div>
</div>
</a>
<a name="contact">
<div>
</div>
</a>
</div>
Then, links to http://www.mywebsite.com/#home will go do what you're looking for, plus google will index it as a subsection of http://www.mywebsite.com/
I think if you put a ! before your anchor tag names, google will actually index each as a separate page.
EDIT: Go here, and scroll down to "Step-by-step guide".

Answer 3

Here is something I use to get the $_GET vars:
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var $_GET = getQueryParams(document.location.search);
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('#'+$_GET.p).offset().top},
'slow');
});