私は取り組んでいるプロジェクトがあり、特定の効果を達成しようとしています。ここにいる誰かが私を助けてくれるかどうか疑問に思っていました.
これが私が今いる場所です：
ここに私のHTMLがあります:
<body>
<div class="section blue" id="section1">
<h2>Section 1</h2>
<div class="scroll">
<a class="btn btn-primary" href="#section1">Section 1</a>
<a class="btn btn-primary" href="#section2">Section 2</a>
<a class="btn btn-primary" href="#section3">Section 3</a>
</div>
</div>
<div class="section green" id="section2">
<h2>Section 2</h2>
<div class="scroll">
<a class="btn btn-primary" href="#section1">Section 1</a>
<a class="btn btn-primary" href="#section2">Section 2</a>
<a class="btn btn-primary" href="#section3">Section 3</a>
</div>
</div>
<div class="section red" id="section3">
<h2>Section 3</h2>
<div class="scroll">
<a class="btn btn-primary" href="#section1">Section 1</a>
<a class="btn btn-primary" href="#section2">Section 2</a>
<a class="btn btn-primary" href="#section3">Section 3</a>
</div>
</div>
</body>
ここに私のCSSがあります:
* {
margin:0;
padding:0;
}
body,
html {
height: 100%;
width: 100%;
}
.section {
text-align: center;
padding-top: 50px;
height:100%;
width:100%;
}
.blue {
background-color: #697bab;
}
.green {
background-color: #6dab69;
}
.red {
background-color: #ab6969;
}
これが私のJavascriptです：
$(function() {
$('.scroll a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
リンクをクリックしてさまざまなセクションに移動できるのが気に入っていますが、マウスでスクロール ホイールを使用すると、次のセクション/前のセクションに移動できるようにすることを目指しています。 . そうすれば、効果は本当に素晴らしく滑らかになります。
これは、私が達成しようとしているマウス ホイールのスクロール効果の最終的な種類の例です。
マウスのスクロール ホイールを使用すると、次のセクションに完全に移動することに注意してください。
これについて何か助けていただければ幸いです、ありがとう！
解決
jquery.mousewheel.js を使用しています - ヒントをくれた DOM に感謝します!