lazyloadとsmoothscrollを併用すると位置がずれるバグが発生します。

Question

lazyloadとsmoothscrollを併用すると停止位置がずれるバグが発生します。

現在のスムーススクロールは２つ設置しています。

//スムーズスクロール
		var topBtn = $('.page-top');
		topBtn.hide();
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				topBtn.fadeIn();
			} else {
				topBtn.fadeOut();
			}
		});

		$("a[href^='#']").click(function(){
			var Hash = $(this.hash);
			var HashOffset = $(Hash).offset().top;
			$("html,body").animate({
				scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
			return false;
		});

//印材一覧スムーズスクロール
		var topBtn2 = $('.inzai-top');
		topBtn2.hide();
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				topBtn2.fadeIn();
			} else {
				topBtn2.fadeOut();
			}
		});

		$("a[href^='#']").click(function(){
			var Hash = $(this.hash);
			var HashOffset = $(Hash).offset().top;
			$("html,body").animate({
				scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
			return false;
		});

lazyloadとsmoothscrollを併用するシンプルな方法
上記の参考サイトによると
下記のコード

const scrollAnimate = ($this, positionStart, scrollSpeed) => {
  $('html').animate({ scrollTop: positionStart }, scrollSpeed, 'swing', () => {
    // スクロールアニメーション終了時に、目的地のY座標を取得
    const positionEnd = getTargetPositionY($this);

    // 処理を繰り返すかの判定
    // 目的地のY座標が変わっていたらやり直し
    if(positionStart !== positionEnd) {
      scrollAnimate($this, positionEnd, SPEED_REPEAT);
    }
  });
}

をいれるといいらしいですが、現状のコードのどの位置に組み込めばよいのでしょうか？

もう１つ別の参考サイトを見つけて、
画像の遅延読込でページ内リンクがずれる時の解決法【jQuery】

記述をためしましたが、改善されません。

		//スムーズスクロール topBtn 2個指定
		var topBtn = $('.page-top,.inzai-top');
		topBtn.hide();
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				topBtn.fadeIn();
			} else {
				topBtn.fadeOut();
			}
		});






		$("a[href^='#']").click(function(){
			var Hash = $(this.hash);
			var HashOffset = $(Hash).offset().top;
			$("html,body").animate({
				scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
			return false;
		});
$.when(
         $("html, body").animate({
           scrollTop: position
         }, 400, "swing"),
         e.preventDefault(),
       ).done(function() {
         var diff = target.offset().top - headerHight;
         if (diff === position) {
         } else {
           $("html, body").animate({
             scrollTop: diff
           }, 10, "swing");
         }
       });
     });

記述の方法がまちがっているのでしょうか？

Answer 1

下記のように書いたら　動きました。

	var topBtn = $('.page-top,.inzai-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});

$('a[href^="#"]').click(function(e) {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;

  $.when(
    $("html, body").animate({
      scrollTop: position
    }, 400, "swing"),
    e.preventDefault(),
  ).done(function() {
    var diff = target.offset().top;
    if (diff === position) {
    } else {
      $("html, body").animate({
        scrollTop: diff
      }, 10, "swing");
    }
  });
});