JQueryでの複数の機能のjsの書き方について（順番やfunctionの扱い方）

###前提・実現したいこと
JQuery,JS初心者です。
現在Webサイトを作っていてjsで動かすために複数のプラグインや、様々なfunctionをもたせているのですが、どういう風に書くのがベストなのかわかりません。
一応動くことは動くのですが、周りにも聞ける人がおらず、教えていただけると嬉しいです。

###該当のソースコード

JavaScript
1//スムーススクロール
2$(function(){
3   // #で始まるアンカーをクリックした場合に処理
4   $('a[href^=#]').click(function() {
5      // スクロールの速度
6      const speed = 500; // ミリ秒
7      // アンカーの値取得
8      const href= $(this).attr("href");
9      // 移動先を取得
10      const target = $(href === "#" || href === "" ? 'html' : href);
11      // 移動先を数値で取得
12      const position = target.offset().top;
13      // スムーススクロール
14      $('body,html').animate({scrollTop:position}, speed, 'swing');
15      return false;
16   });
17
18  //SPドロワーーメニュー
19  $(".drawer").drawer();
20
21  //一定の場所で追従してくるナビ
22  $(function(){
23    const navBox = $(".sub-header-top");
24    const TargetPos = 350;
25
26    if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
27      $(window).scroll( function() {
28         // 現在のスクロール位置を取得
29         const ScrollPos = $(window).scrollTop();
30         // 現在のスクロール位置と、目的のスクロール位置を比較
31         if( ScrollPos > TargetPos ) {
32            // 表示(フェイドイン)
33            navBox.fadeIn();
34            // navTopBox.hide();
35         } else {
36            // 非表示(フェイドアウト)
37            navBox.fadeOut();
38         }
39      });
40    }
41  });
42});
43
44
45//toggle
46$(".recruit-list li").click(function () {
47  $("p",this).slideToggle();
48});

##質問したいこと
・現在ローカルの開発にgulpを使っており、この場合、一行や二行でも機能ごとにjsのファイルを分けたほうがいいのか（smoothScroll.jsとかdrawer.jsとか）
・まとめて書く場合、最初のfunctionや各functionはどうしたらいいか
・この4つの機能の場合どう書くのがベストなのか
・その他コードでおかしい点があれば教えて欲しいです。

宜しくお願いします。