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行を増やして数字を変えるだけで
何か所分でも作れます。
まとめ
なんかもっといい方法ないものか・・・
構造的に難しい気はする。
ただ同じような文章を何個も書いているのは
個人的にはダサくて嫌い。