我怎樣才能從頂部菜單滾動頁面

我是新來的，我也是jquery的新手。我正在嘗試製作一個帶有background-fixed的網站，其中包含一張圖片和四個鏈接，並顯示在每個頁面上，如：about，portfolio，contact，gallery。它應該是當我點擊左右，一個頁面下拉，再次點擊時，相同的第二個鏈接等所有鏈接。我已經在html和css中編寫了以下代碼。我完成了一頁，但不知道如何添加更多頁面。我怎樣才能從頂部菜單滾動頁面

這裏是我的CSS：

body{ 
    margin:auto; 
    padding:auto; 
} 
#page{ 
    width:1000px; 
    height:1000px; 
    border:1px solid red; 
    background-image:url('done3.jpg'); 
} 
#panel{ 
    padding:50px;display:none; 
} 
#panel 
{ 
    padding:300px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
} 
#flip 
{ 
    width:100px; 
    padding:15px; 
    text-align:center; 
    background-color:pink; 
    border:solid 1px #c3c3c3; 
}

這裏是我的html：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
     </script> 

     <script> 
      $(document).ready(function(){ 
       $("#flip").click(function(){ 
        $("#panel").slideToggle("slow"); 
       }); 
      }); 
     </script> 

     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>demo</title> 
    </head> 

    <body> 
     <div id="page"> 
      <div id="flip">about us</div> 
      <div id="panel">about us</div> 
     </div> 
    </body> 
</html>

來源

2013-07-26 sukh jeet

你的問題到底是什麼？ –

您可以設置$(window).scrollTop(positionInPixels);當前滾動位置並獲得網站上的元素位置.offset().top。把一起並假設$link是你的鏈接和$target是要滾動到目標：

$link.click(function(e) { 
    e.preventDefault(); 

    if($(window).scrollTop() != $target.offset().top) { 
     $(window).scrollTop($target.offset().top); 
    } else { 
     $(window).scrollTop(0); 
    } 

    return false; 
}

來源

2013-07-26 19:33:15

它的工作原理，謝謝。我是否也可以從另一側滑動它？例如從右側到左側？我應該需要chande slidedown（）或其他東西 –

對於水平滾動，您可以使用'scrollLeft'而不是'scrollTop'和'offset（）。left'而不是'offset（）。top'！ –

如果你將有更多的「翻轉」，那麼你應該爲CSS翻蓋類，並給每一個獨特的ID。

CSS：

<style> 
body 
{ 
margin:auto; 
padding:auto; 
} 
#page 
{ 
width:1000px; 
height:1000px; 
border:1px solid red; 
background-image:url('done3.jpg'); 
} 
.panel 
{padding:50px;display:none; 
} 
.panel 
{ 
padding:300px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
.flip 
{ 
width:100px; 
padding:15px; 
text-align:center; 
background-color:pink; 
border:solid 1px #c3c3c3; 
} 
</style>

HTML：

<div class="flip" id="flip">about us</div><div class="flip" id="flip2">about us2</div> 
<div class="panel" id="panel">content</div> 

<div class="panel" id="panel2">content2</div>

您還需要更多的添加到您的JavaScript上被點擊時該怎麼辦。這裏是一個示例，但您應該更多地使用它，因此您不必爲每個「翻頁」複製和粘貼它。

<script> 
$(document).ready(function(){ 
$("#flip").click(function(){ 
$("#panel").slideToggle("slow"); 
}); 
$("#flip2").click(function(){ 
$("#panel2").slideToggle("slow"); 
}); 

}); 
</script>

這裏是部分工作版本。可以有很多增強功能，但希望能夠讓你開始。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("#flipabout").click(function(){ 
$("#panelabout").slideToggle("slow"); 
}); 
$("#flipportfolio").click(function(){ 
$("#panelportfolio").slideToggle("slow"); 
}); 
$("#flipcontact").click(function(){ 
$("#panelcontact").slideToggle("slow"); 
}); 
$("#flipgallery").click(function(){ 
$("#panelgallery").slideToggle("slow"); 
}); 
}); 
</script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>demo</title> 
<style> 
body 
{ 
margin:auto; 
padding:auto; 
} 
#page 
{ 
width:1000px; 
height:1000px; 
border:1px solid red; 
background-image:url('done3.jpg'); 
} 
.panel 
{padding:50px;display:none; 
} 
.panel 
{ 
padding:300px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
.flip 
{ 
width:100px; 
padding:15px; 
text-align:center; 
background-color:pink; 
border:solid 1px #c3c3c3; 
float: left; 
} 
</style> 
</head> 
<body> 
<div id="page"> 
<div class="flip" id="flipabout">about us</div> 
<div class="flip" id="flipportfolio">portfolio</div> 
<div class="flip" id="flipcontact">contact</div> 
<div class="flip" id="flipgallery">gallery</div> 
<div class="panel" id="panelabout">about...</div> 
<div class="panel" id="panelportfolio">Portfolio...</div> 
<div class="panel" id="panelcontact">contact...</div> 
<div class="panel" id="panelgallery">gallery....</div> 
</div> 
</body> 
</html>

來源

2013-07-26 19:34:36

非常感謝您的支持 –

我怎樣才能從頂部菜單滾動頁面

回答

相關問題