I am currently working on a portfolio project where I want the page to scroll all the way down until the footer image aligns perfectly with the top image. This will create a seamless merging of the header and footer images.
Despite searching extensively on Google and Stack Overflow, I have not been able to find a solution that achieves this desired effect.
UPDATE
I have made some style adjustments.
While the scrolling functions properly in IE9, it does not work as expected in Google Chrome. Any suggestions on how to address this discrepancy? Thank you
UPDATE 2
Although I have successfully implemented smooth scrolling, I am encountering height-related issues during web browsing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | S.H. MOKHTAR | 2011</title>
<link rel="stylesheet" type="text/css" href="layout/styles.css" />
<script>
function pageScroll() {
window.scrollBy(0,60); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<div id="header"></div>
<div id="content"><input type="button" onClick="pageScroll()" value="Scroll Page">
<a href="javascript:stopScroll()">Stop Scrolling</a><br>
<br>
</div>
<div id="footer"><img src="layout/images/bot.png" style="width:auto; height:auto" /></div>
</body></html>
body, html, div, input, footer{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
width:100%;
}
#header{
background:url(images/top.png); height:auto; width:auto; background-repeat:no-repeat;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
#content{
margin-top:50px;
}
#footer{height:870px;
}
UPDATE 3
Thanks to some assistance, I was able to resolve the height issue. The updated code is now available for download at or can be viewed live at .
You can also check out my other question where I received help with this problem: Height different in IE FF Chrome
Thank you