Large page with verticle and horizontal scrolling
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.
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>ASKER
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>
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.
I think it should also be fully qualifed:
window.scrollTo(document.g
some browsers might not understand it if we don't specify the window object.
window.scrollTo(document.g
some browsers might not understand it if we don't specify the window object.
ASKER
Can you further write it out for me? My javascript skills are almost null.
ASKER
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@COBOLdinosaur:
Thank you so much. One last thing, how do I animate it so it takes a second or two?
Thank you so much. One last thing, how do I animate it so it takes a second or two?
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.
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.
ASKER
Thank you for your answer. I'm asking how not if I should do it.
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/j
http://www.roseindia.net/j
http://www.w3resource.com/
http://www.w3schools.com/j
http://www.roseindia.net/j
http://www.w3resource.com/
ASKER
Thank you again for all of your help. I really think I'm on the correct path now. Thank you.
Open in new window