小金井にあるWEB制作会社の備忘録
MEMORANDUMjQueryで拡大・縮小しながらスムーススクロール

- 公開日:2020-02-26
- 最終更新日:2021-01-14
「ゴルフ大会」のキャンペーンページを作成した際に使用した、モーション付きのスムーススクロールの方法をメモ。
移動前にコンテンツ幅を変化させることで、動きに面白みを追加している。
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;
});