JavaScriptのプログラムについて

質問

$(function(){
$("#top a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

$("#question a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

$("#q001 a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

$("#q002 a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

$("#q003 a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

$("#q004 a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

});
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HTMLは少し分かりますが
JavaScriptがまったく分からない素人です。
ネットで調べて上記のようにプログラムし
ページ内リンクを流れるようにスクロールさせることは出来ました。
まずこのプログラムの書き方で合っていますでしょうか？

また、同じ記述が繰り返されているので短くしてやろうと自分なりに

$("#q001 a")
$("#q002 a")
$("#q003 a")
$("#q004 a")
$("#q005 a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})

↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。
省略したり短く出来る余地があればそれも教えていただきたいです。
分かる方がおられましたらお願いします。

回答No.1

weakweak · ベストアンサー

私もプロじゃないので具体的なの書こうと思うと大変なので書きませんが、私ならアニメートさせたい要素ID(#記号が頭についてるのがIDで.記号が頭についてるのがclass)を配列に格納して、もしもクリックされた要素IDがその配列のリストに含まれていればアニメートするっていうスクリプト書きます。それならアニメートさせる要素が増えてもスクリプトのを今の行数1/3くらいに減らせるんじゃないでしょうか。

ちなみに質問者さんが質問しているのはjsはjsでも、jsを利用したライブラリであるjqueryなので、くわしい文法はjqueryとしらべてみてください。