これは私のcssです
<style type="text/css" media="screen">
body {
margin: 0;
}
#wrap1{
width:600px;
margin:0 auto;
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
#body1{
width: 8000px;
}
.panel {
width: 600px;
float: left;
left:0px;
top:0px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
</style>
これが私の体内にあるものです
<div id="wrap1">
<div id="body1">
<div id="banner">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#newsletter">Newsletter</a>
</li>
<li>
<a href="#directions">Directions & Opening Hours</a>
</li>
<li>
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
<div id="home" class="panel">
<h2>
Home
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="newsletter" class="panel">
<h2>
Newsletter
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="directions" class="panel">
<h2>
Directions
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="contact" class="panel">
<h2>
Contact
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
そしてこれはjavascriptです
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $($(this).attr("href"));
$("html, #wrap1").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
私はこのようなものが欲しいです。そのため、ナビゲーションの連絡先をクリックすると、wrap1 内のページがアンカー #contact のある場所までスムーズにスクロールします
しかし、私が今得ているのは、スムーズスクロールが正常に機能していることですが、停止するはずの場所で停止していないようです。たとえば、ニュースレターのリンクをクリックすると、ニュースレターの半分の部分でスクロールが停止します。ニュースレターのリンクをクリックすると、ニュースレターの半分と行き方の半分が表示されます。
jQueryの達人がこの問題を解決するのを手伝ってください。これは何日も私を悩ませてきました。
私が持っているjQueryの知識が不足していることを感謝し、申し訳ありません。
*編集済み: これは私のページが現在のように見えるものです。助けてください http://testhscroll.tumblr.com/