Question

我正在尝试创建一个投资组合，如果您单击“滚动页面”，页面将完全滚动，直到页脚图像是顶部图像。因此，当页眉和页脚合并时，您可以看到一个完整的图像。

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

编辑

我更新了风格。

在IE9上，它滚动直到页脚击中标题并且它很合适，但在谷歌浏览器中却没有。任何人都有任何想法？谢谢

编辑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

谢谢

Answer 1

没有测试过，但是这样的话：

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

（使用jQuery ofcourse for XB（Cross Browser））

滚动页面，直到页脚点击标题

1 个答案: