jQuery samples - overflow:scroll内をスムーズスクロール

jQuery samples - jQuery samples - ページ内スクロール(iframe)

本エントリーは「to-R JavaScript Advent Calendar 2015」14日目のエントリー、今回のjQuery samplesは、overflow:scroll内も含めたスムーズスクロール方法についての解説です。

普通のページ内スムーズスクロール

普通のページ内スムーズスクロールはよく利用されてるいかのようなコードで実現可能です。

$(function(){
	$("a[href^='#']").click(function(){
		$("body,html").stop().animate({
			scrollTop:$($(this).attr("href")).offset().top
		});
		return false;
	});
});

以下が実行サンプル。

See the Pen jQuery samples - overflow:scroll内をスムーズスクロール by Kazuma Nishihata (@to-r) on CodePen.


overflow:scroll内をスムーズスクロール

ところが上記のコードは以下のサンプルのようなoverflow:scroll内では動作しません。

<a href="#ancher01">01</a>
<a href="#ancher10">10</a>
<a href="#ancher20">20</a>
<a href="#ancher30">30</a>
<a href="#ancher40">40</a>
<a href="#ancher50">50</a>
<a href="#ancher60">60</a>
<div class="scroll">
<p id="ancher01">01</p>
<p id="ancher02">02</p>
(中略)
<p id="ancher59">59</p>
<p id="ancher60">60</p>
</div>
.scroll{
  height:100px;
  overflow:scroll;
  border:1px solid black;
  padding:10px;
}

以下が不動作サンプル。

See the Pen overflow:scroll内をスムーズスクロール by Kazuma Nishihata (@to-r) on CodePen.

これは、以下のように修正すると動作するようになります。

まず、HTMLではdata-box属性を利用してoverflow:scrollされている要素を明示します。

<a href="#ancher01" data-box=".scroll">01</a>

jQuery側ではdata-box属性が指定されてる場合ページ内スクロールではなく要素内スクロールになるようにします。下記のコードのdistは目的の位置になるまでも移動距離を示しており、現在のスクロール位置($box.scrollTop())に加算することでスクロールして移動するようになります。

$(function(){
	$("a[href^='#']").click(function(){
		
		//data-box属性がない場合は通常のスムーズスクロール
		if(!$(this).data("box")){
			$("body,html").stop().animate({
				scrollTop:$($(this).attr("href")).offset().top
			});
			
		//data-box属性がある場合はdata-box内をスムーズスクロール
		}else{
			var $box = $($(this).data("box"));
			var $tareget = $($(this).attr("href"));
			var dist = $tareget.position().top - $box.position().top;
			$box.stop().animate({
				scrollTop: $box.scrollTop() + dist
			});
		}
		return false;
	});
});

以下が動作サンプル。

See the Pen overflow:scroll内をスムーズスクロール by Kazuma Nishihata (@to-r) on CodePen.

スポンサードリンク

«jQuery samples - スクロールすると表示されるトップへ戻るボタン | メイン | IE6で透過PNGを利用するためのTIPS»