We help IT Professionals succeed at work.

Large page with verticle and horizontal scrolling

Robert Granlund
on
I would like to create a page that has a very large height and width.  On that page are various anchors that I would like to have javascript scroll to.

For example in this code, if you click on "Go To Hello Two"  the page would automatically shift/ smoothly scroll  to the left so Hello World Two was in the top Left hand corner.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
h2	{
	color:#fff;
}
</style>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>

<body>
<div style="width:2000px;">

<div style="width:1000px;height:500px;background-color:#fff;float:left;">
<h1>Hello World One</h1>
<br />
<br />
<a href="#helloTwo">Go To Hello Two</a>
</div>

<div style="width:1000px;height:500px;background-color:#000;float:right;">
<h2>Hello World Two</h2>
<br />
<br />
<a name="helloTwo" id="helloTwo">Hello Two</a>
</div>

</div>
</body>
</html>

Open in new window

Comment
Watch Question

Top Expert 2013

Commented:
as long as the elements have an id you can do this:

scrollTo(document.getElementById('someid')offsetLeft, document.getElementById('someid').offsetTop);

Open in new window

Author

Commented:
Like this?  Cause it does not work for me.  Also, what if there are multiple links?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
h2	{
	color:#fff;
}
</style>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>

<body>
<div style="width:2000px;">
<script>
scrollTo(document.getElementById('helloTwo')offsetLeft, document.getElementById('helloTwo').offsetTop);
</script>
<div style="width:1000px;height:500px;background-color:#fff;float:left;">
<h1>Hello World One</h1>
<br />
<br />
<a href="#helloTwo">Go To Hello Two</a>

</div>
<br /><br />

<div style="width:1000px;height:500px;background-color:#000;float:right;">
<h2>Hello World Two</h2>
<br />
<br />
<a name="helloTwo" id="helloTwo">Hello Two</a>
</div>

</div>
</body>
</html>

Open in new window

Top Expert 2013

Commented:
Well their is a problem with that.  The code needs to be in a function and you trigger it with an event like onclick and pass the id of the target as a parameter.  You can't just stick it in the middle of the HTML.
Top Expert 2013

Commented:
I think it should also be fully qualifed:

window.scrollTo(document.getElementById('someid')offsetLeft, document.getElementById('someid').offsetTop);

some browsers might not understand it if we don't specify the window object.

Author

Commented:
Can you further write it out for me?  My javascript skills are almost null.

Author

Commented:
Is this closer?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
h2	{
	color:#fff;
}
</style>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
</head>

<body>
<div style="width:2000px;">
<script type="text/javascript">
function helloTwo() {
window.scrollTo(document.getElementById('helloTwo')offsetLeft, document.getElementById('helloTwo').offsetTop);
}
</script>
<div style="width:1000px;height:500px;background-color:#fff;float:left;">
<h1>Hello World One</h1>
<br />
<br />
<form>
<input type="button" value="Go To Hello Two" onclick="helloTwo()" />
</form>

</div>
<br /><br />

<div style="width:1000px;height:500px;background-color:#000;float:right;">
<h2>Hello World Two</h2>
<br />
<br />
<a name="helloTwo" id="helloTwo">Hello Two</a>
</div>

</div>
</body>
</html>

Open in new window

Top Expert 2013
Commented:
here you are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
h2	{
	color:#fff;
}
</style>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
function scroller(x)
{
elem=document.getElementById(x);
window.scrollTo(elem.offsetLeft, elem.offsetTop);
}
</script>
</head>

<body>
<div style="width:2000px;">
<div style="width:1000px;height:500px;background-color:#fff;float:left;">
<h1>Hello World One</h1>
<br />
<br />
<form>
<input type="button" value="Go To Hello Two" onclick="scroller('helloTwo')" />
</form>

</div>
<br /><br />

<div style="width:1000px;height:500px;background-color:#000;float:right;">
<h2>Hello World Two</h2>
<br />
<br />
<a name="helloTwo" id="helloTwo">Hello Two</a>
</div>

</div>
</body>
</html>

Open in new window

Author

Commented:
@COBOLdinosaur:

Thank you so much.  One last thing, how do I animate it so it takes a second or two?
Top Expert 2013

Commented:
Slowing it down is problematic and does not work very well because it is dependent on user settings.  

The first step is a function to determine where in the window the page is currently positioned, and the distance to the target, then another function which is recursive has to be created and control by a time out which move in steps to the new position.  If the steps are too large or the timing interval is too slow then the movement will be jerky.  If the steps are to small the movement will be extremely slow.

It is not something I recommend, because most users won't like it.

Author

Commented:
Thank you for your answer.  I'm asking how not if I should do it.
Top Expert 2013

Commented:
I have never tried what you are trying to do and I have not run across any examples of it, so the best I can do is give you some links that outline the scrollBy method:
http://www.w3schools.com/jsref/met_win_scrollby.asp


http://www.roseindia.net/javascript/javascript-scrollby.shtml

http://www.w3resource.com/javascript/client-object-property-method/window-scrollby.php

Author

Commented:
Thank you again for all of your help.  I really think I'm on the correct path now.  Thank you.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.