アニメーション化されたスクロール効果を備えた中央の水平 Web レイアウトを作成しました。シンプルなアンカーを使用して異なるページ間を移動する 5 つのメニューがあります。本文 (コンテンツ) ゾーンを除いてすべてのページが静的であるため、特定の DIV 内のアンカーをターゲットにするだけです。つまり、スライドするのはすべてのページではなく、コンテンツ部分だけです。調査された効果は、あるページから別のページへの流動的なスクロールです。最初のメニュー項目をクリックして最後の項目 (5 番目) をクリックすると、最後の項目まですべてのページが次々とスライドします... これまでのところは問題ありません。
他のサイト (いくつかの css 部分) と小さな jquery 部分からサンプル コードを取得しました。しかし、いくつかのメニューをクリックしても、何も起こらないこともあれば、良いスライドが表示されないこともあり、最終的には良い方向にスライドせず (反対方向にスライドする)、この部分で立ち往生します。 .
HTML
<body>
<div id="menu">
<ul>
<li><a href="#menu1">Page 1</a></li>
<li><a href="#menu2">Page 2</a></li>
<li><a href="#menu3">Page 3</a></li>
<li><a href="#menu4">Page 4</a></li>
<li><a href="#menu5">Page 5</a></li>
</ul>
</div>
<div align="center" id="body">
<div id="body_wrapper">
<div class="body_content_content" id="menu1">menu1 page content</div>
<div class="body_content_content" id="menu2">menu2 page content</div>
<div class="body_content_content" id="menu3">menu3 page content</div>
<div class="body_content_content" id="menu4">menu4 page content</div>
<div class="body_content_content" id="menu5">menu5 page content</div>
</div>
</div>
</body>
CSS
#menu ul li {
display:inline;
}
#body {
width:100%;
height:200px;
margin:auto;
position:relative;
border: 0px solid red;
overflow:hidden;
top:100px;
}
#body_wrapper {
float:left;
width:500%;
padding:0;
margin:0;
height: 200px;
}
.body_content_content {
float:left;
width:20%;
height:200px;
#margin:10px 0;
position:relative;
}
.body_content_content div:first {
width:900px;
padding:20px;
margin:auto;
float:none;
}
Jクエリ
$('a[href^="#"]').on('click',function(event){
var $anchor = $(this);
$('#body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
フィドルでは、CSS overflow:display; を設定できます。を #body ID に追加し、フィドルを再度実行して、次の 5 つの 1 対 1 の div を持つ通常の div を確認します。
助けてくれてありがとう。