Home/ Questions/Q 4616652
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T02:00:46+00:00

I am trying to make a portfolio where if you click on ‘scroll page’,

  • 0

I am trying to make a portfolio where if you click on ‘scroll page’, the page will scroll completely until the footer image is one with the top image. So you can see one complete image when header and footer are merged.

I have searched Google and Stack Overflow, but unfortunately I couldn’t find anything that did the trick.

EDIT

i have updated the style.

On IE9 it scrolls until footer hits header and it fits good, but in google chrome it does not.
Anyone have any idea? Thank you

EDIT 2

I have managed to make the page scroll but now i have height property problems in web crossing.

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

EDIT 3

With help i managed to resolve the height problem, The new code is up and running and for download at http://www.sushitaksteeg.nl/secret/Port.rar or live at http://www.sushitaksteeg.nl/secret/template.html for now.

My other question where i could solve this problem with help is: Height different in IE FF Chrome

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Haven’t tested it, but something like this:

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

    (With jQuery ofcourse for XB (Cross Browser))

    • 0