jQuery:ブラウザ幅によってスクロール値を変更したい（ページ内スクロール）

Question

ページ内スクロールで、ブラウザ幅によってスクロールする位置を変えたいなと思っています。
下のようなコードだとページを読み込んだ直後は希望通りの動作をしますが、ブラウザ幅を変えると動作が安定しません。
また、記述の仕方も冗長なのでもうちょっとスマートに書きたいです。
よろしくお願いいたします。

$(window).on('load resize', function(){
  if(window.innerWidth > 1029){
    $('a[href^=#]').click(function() {
      var speed = 300;
      var href= $(this).attr("href");
      var target = $(href === "#" || href === "" ? 'html' : href);
      var position = target.offset().top - 93;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  } else {
    $('a[href^=#]').click(function() {
      var speed = 300;
      var href= $(this).attr("href");
      var target = $(href === "#" || href === "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position02}, speed, 'swing');
      return false;
    });
  }
});

Answer 1

書かれているコードではリサイズするたびに新たにクリックイベントを追加することになるので、挙動がおかしくなるのだと思います。リサイズ時にフラグを付けてclickイベントの中でそのフラグを参照してはいかがでしょうか。

var speed = 300;
var flag = false;
$( window ).on( 'load resize', function() {
	if ( window.innerWidth > 1029 ) {
		flag = true;
	} else {
		flag = false;
	}
} );
$( 'a[href^=#]' ).click( function() {
	var href= $( this ).attr( 'ref' );
	var position = $( href === "#" || href === '' ? 'html' : href ).offset().top;
	if ( flag ) { position -= 93; }
	$( 'body, html' ).animate( { scrollTop : position }, speed, 'swing' );
	return false;
} ); // （未テスト）

Comments

[aurized]

ご教授ありがとうございます！
早速試してみたところ、希望通りの動作が得られました。
また、このような記述ができるのですね`position -= 93`。
とても勉強になり助かりました！

[kei344]

> このような記述ができるのですね
代入演算子といいます。「*=」「/=」「-=」「+=」とかあります。

【式と演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators#Assignment_operators

解決できたようでよかったです！

[aurized]

なるほど、ご丁寧にありがとうございます。勉強になります。