マウスホイールで移動する際、スイーンと余韻の残る動きを付けたかったので、jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験の記事を参考にさせて頂きました。
スクリプトは、下記の通りです。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0){
// マウスホイールを下にスクロールしたときの処理を記載
} else {
// マウスホイールを上にスクロールしたときの処理を記載
}
});
});
</script>
これを参考に、任意の要素へ移動させるには、$(window).scrollTop()で現在位置を把握して、その位置から上と下それぞれ移動したい箇所の高さを取得して、スムースに移動させています。
<script>
$(function(){
scrSpeed = 800;
scrEasing = 'easeOutCirc';
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0){
if($(window).scrollTop() >= $("#cont6").offset().top){
scrSet = $("#cont6").offset().top + 200;
}else if($(window).scrollTop() >= $("#cont5").offset().top){
scrSet = $("#cont6").offset().top;
}else if($(window).scrollTop() >= $("#cont4").offset().top){
scrSet = $("#cont5").offset().top;
}else if($(window).scrollTop() >= $("#cont3").offset().top){
scrSet = $("#cont4").offset().top;
}else if($(window).scrollTop() >= $("#cont2").offset().top){
scrSet = $("#cont3").offset().top;
}else{
scrSet = $("#cont2").offset().top;
}
} else {
if($(window).scrollTop() >= $("#cont6").offset().top){
scrSet = $("#cont5").offset().top;
}else if($(window).scrollTop() >= $("#cont5").offset().top){
scrSet = $("#cont4").offset().top;
}else if($(window).scrollTop() >= $("#cont4").offset().top){
scrSet = $("#cont3").offset().top;
}else if($(window).scrollTop() >= $("#cont3").offset().top){
scrSet = $("#cont2").offset().top;
}else if($(window).scrollTop() >= $("#cont2").offset().top){
scrSet = $("#header").offset().top;
}
}
$('html,body').stop().animate({scrollTop:scrSet},scrSpeed,scrEasing);
return false;
});
});
</script>
特にパララックスサイトには、スムースな移動と任意の位置へのマウスホイール設定は合うと思います。
宜しければ、ご参考までに。
