2011-05-12 58 views
0

我正在嘗試創建一個投資組合,如果您點擊'滾動頁面',頁面將完全滾動,直到頁腳圖像與頂部圖像一致。因此,當頁眉和頁腳合併時,您可以看到一個完整的圖像。滾動頁面,直到頁腳打到標題

我已經搜索了Google和Stack Overflow,但不幸的是我找不到任何伎倆。

編輯

我已經更新了風格。

在IE9上,它會滾動,直到頁腳打到頁眉,並且它很合適,但在谷歌瀏覽器中它不會。 任何人有任何想法?謝謝

EDIT 2

我已成功地使頁面滾動,但現在我已經在網絡交叉height屬性的問題。

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

謝謝

回答

2

沒有測試過,但這樣的事情:

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

(使用jQuery ofcourse對於XB(跨瀏覽器))