滚动页面直到页脚碰到页眉答案

【问题标题】：Scroll page until footer hits header滚动页面直到页脚碰到页眉
【发布时间】：2011-05-14 05:53:08
【问题描述】：

我正在尝试制作一个作品集，如果您单击“滚动页面”，页面将完全滚动，直到页脚图像与顶部图像合为一体。因此，当页眉和页脚合并时，您可以看到一张完整的图像。

我已经搜索了 Google 和 Stack Overflow，但很遗憾，我找不到任何可以解决问题的方法。

编辑

我已经更新了样式。

在 IE9 上它会滚动，直到页脚碰到页眉并且它很合适，但在 google chrome 中它不会。有人知道吗？谢谢

编辑 2

我已经设法让页面滚动，但现在我在网页交叉时遇到了高度属性问题。

        <!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;
}

编辑 3

在帮助下，我设法解决了高度问题，新代码已启动并运行，现在可以在http://www.sushitaksteeg.nl/secret/Port.rar 下载或在http://www.sushitaksteeg.nl/secret/template.html 下载。

我可以通过帮助解决此问题的另一个问题是：Height different in IE FF Chrome

谢谢

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

没有测试过，不过是这样的：

$("body").scrollTop($("#yourimage").position().top);

（使用 jQuery ofcourse for XB（跨浏览器））

【讨论】：