小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryで拡大・縮小しながらスムーススクロール

  • 公開日：2020-02-26
  • 最終更新日：2020-02-25

「ゴルフ大会」のキャンペーンページを作成した際に使用した、モーション付きのスムーススクロールの方法をメモ。
移動前にコンテンツ幅を変化させることで、動きに面白みを追加している。

HTML

<header>
<nav>
<ul>
<li><a href="section1">リンクボタン1</a></li>
<li><a href="section2">リンクボタン2</a></li>
<li><a href="section3">リンクボタン3</a></li>
</ul>
</nav>
</header>
<article>
<section class="section1">
<h2>見出し1</h2>
<p>コンテンツ内容を記載</p>
</section>
<section class="section2">
<h2>見出し2</h2>
<p>コンテンツ内容を記載</p>
</section>
<section class="section3">
<h2>見出し3</h2>
<p>コンテンツ内容を記載</p>
</section>
</article>

CSS

body{
	overflow-x:hidden; }

jQuery

$('header nav a').click(function(){
	var target = '.'+$(this).attr('href');
	var position = $('.'+$(this).attr('href')).offset().top;
	$('article').animate({'opacity':'0.05', 'padding':'0 5%', 'margin-top':'60px'}, '1000', 'swing', function(){
		$('body,html').animate({scrollTop:position}, 'slow', 'swing', function(){
			$(target+' h2').nextAll().css({'opacity':'0', 'margin-top':'60px'});
			$('article').css({'opacity':'1', 'padding':'0'}).animate({'margin-top':'0'}, '1000', 'swing', function(){
				$(target+' h2').nextAll().animate({'opacity':'1', 'margin-top':'0'}, '1000', 'swing');
			});					
		});
	});
	return false;
});