【jQuery】アンカーリンクでPCとモバイルで違う固定ヘッダーの高さを除きたい

実現したいこと

ページ内リンクの際に、jQueryで固定ヘッダー分の高さを除きたいのですが、
サイトがレスポンシブサイトなので、PCとモバイルでヘッダーの高さが変わります。

そこで、ブラウザ幅によって条件分岐をして、それぞれのサイズで、異なる高さ分を除くように、
ifとelseの中で同一のコードをコピペして、ヘッダの高さのところだけ数値を変えてみました。
ちなみに、モバイルでは150px、PCでは120pxです。

実際のコードが下記になりますが、これで動作も一応OKとなっているのですが、
ほぼ同じコードを2回コピペしているところがあまりにも芸がない感じで、
もう少しすっきりした記述にしたいとかんがえます。
しかし、それにはどう書きなおしたらよいのかが分かりません。

なにかもっとうまい記述方法があれば、ぜひとも教えていただければと思います。
よろしくお願いいたします。

該当のソースコード

jquery
1if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
2// ❶スマホのみに適用させるJavaScriptを記述
3jQuery(function($) {
4      var headerHight = 150; //ヘッダの高さ
5      $('a[href*=#]').click(function(){
6          var speed = 200;
7          var href= $(this).attr('href');
8          var url = location.protocol + '//' + location.hostname + location.pathname;
9          href = href.replace(url, '');
10          var target = $(href == '#' || href == '' ? 'html' : href);
11          if( target.size() < 1 ) return true;
12          var position = target.offset().top-headerHight;
13          $('html, body').animate({scrollTop:position}, speed, 'swing');
14          return false;
15      });
16    });
17} else {
18
19// ❷その他PC・タブレットに適用させるJavaScriptを記述
20jQuery(function($) {
21      var headerHight = 120; //ヘッダの高さ
22      $('a[href*=#]').click(function(){
23          var speed = 200;
24          var href= $(this).attr('href');
25          var url = location.protocol + '//' + location.hostname + location.pathname;
26          href = href.replace(url, '');
27          var target = $(href == '#' || href == '' ? 'html' : href);
28          if( target.size() < 1 ) return true;
29          var position = target.offset().top-headerHight;
30          $('html, body').animate({scrollTop:position}, speed, 'swing');
31          return false;
32      });
33    });
34}
35

行動規範の内容に同意します

回答1件

ベストアンサー

一番外側のifとelseの中の処理はheaderHight以外に違いはないということですね。

条件 (三項) 演算子を使って先にheaderHightを定義する感じはいかがでしょうか。
＊条件は長いので独立した関数にしても良いのかもしれませんね

条件 (三項) 演算子 - JavaScript | MDN

js
1//ヘッダの高さ
2// ❶スマホのみに適用させるJavaScriptを記述
3// ❷その他PC・タブレットに適用させるJavaScriptを記述
4const headerHight = ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) ? 150 : 120;
5
6jQuery(function ($) {
7  $('a[href*=#]').click(function () {
8    var speed = 200;
9    var href = $(this).attr('href');
10    var url = location.protocol + '//' + location.hostname + location.pathname;
11    href = href.replace(url, '');
12    var target = $(href == '#' || href == '' ? 'html' : href);
13    if (target.size() < 1) return true;
14    var position = target.offset().top - headerHight;
15    $('html, body').animate({ scrollTop: position }, speed, 'swing');
16    return false;
17  });
18});