jQueryでページ内スクロールを誰でも使えるコードで作ってみました【HTML/CSS】

今回はjQueryを使用したページ内スクロールを
簡単に実装できるようなjQueryコードを紹介します。

 

jQuery

$('.b-scroll01').on('click', function(){
 $('html, body').animate({ scrollTop: $('.a-scroll01').offset().top}, 500);
});
$('.b-scroll02').on('click', function(){
 $('html, body').animate({ scrollTop: $('.a-scroll02').offset().top}, 500);
});
$('.b-scroll03').on('click', function(){
 $('html, body').animate({ scrollTop: $('.a-scroll03').offset().top}, 500);
});
$('.b-scroll04').on('click', function(){
 $('html, body').animate({ scrollTop: $('.a-scroll04').offset().top}, 500);
});
$('.b-scroll05').on('click', function(){
 $('html, body').animate({ scrollTop: $('.a-scroll05').offset().top}, 500);
});

このjQueryコードを使えば

スクロールトリガー要素(ボタン)に「b-scroll01~05」(beforeのb)

スクロールさせたい場所に「a-scroll01~05」(afterのa)

のクラスを実装するだけでページ内スクロールが
アニメーション付きで実装されます。

当然上の3行を増やして数字を変えるだけで
何か所分でも作れます。

 

まとめ

なんかもっといい方法ないものか・・・

構造的に難しい気はする。

ただ同じような文章を何個も書いているのは
個人的にはダサくて嫌い。