回答編集履歴

コードの修正

2020/07/08 08:55

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -74,12 +74,21 @@
               function () {
                 // Callback after animation
                 // Must change focus!
+                var oldScroll = $(window).scrollTop();
+                $(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
+                  $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。
+                });
                 target.focus(); //targetは既にjQueryオブジェクトになっているから変換は不要
                 if (target.is(":focus")) {
                   // Checking if the target was focused
                   return false;
                 } else {
                   target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
+                  var oldScroll = $(window).scrollTop();
+                  $(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
+                      $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。
+                  });
                   target.focus(); // Set focus again
                 }
               }
@@ -158,12 +167,23 @@
   });
 ```
-~~HTMLが提示されてないので動作確認は出来てません。ひょっとしたら```event.preventDefault();
-```は必要かもしれません。そちらで動作確認し、適宜対応してください。~~
 firefoxのみ正しく動いて見えたのはfirefoxにバグがあってスクロールしなかったからで
 firefox以外のブラウザの動作が正常動作です。
 動作確認してみたところ、IEはバグっててダメでした、edge(WEBから落としてきた最新版のedge),chrome,firefoxでは一応問題ありませんでしたが、chromeでまれにスクロールする事がありましたが再度クリックで直ります。
 その他についてはソースにコメントを入れてあるので参照してください。
-はぁ、プラグインもテストしてて予想外に疲れた･･･
+はぁ、プラグインもテストしてて予想外に疲れた･･･
+### 追記：更なる改良でほぼfocus()のスクロールをIE以外で無効化できましたので、再再度ソースを差し替えました
+focus()の直前に以下のコードを入れておくと最後に追加しているイベントハンドラと合わせて
+ほぼ無効化できました。
+focus()の直前に以下のコードを入れ込む
+```javascript
+var oldScroll = $(window).scrollTop();
+$(window).one('scroll', function() { //focus()の直前に一度だけ機能するscrollのイベントリスナを設定
+    $(window).scrollTop(oldScroll); //focus()によるスクロールを一度だけ上書きして無効化する。
+});
+```
+このコードと、最後に追加した'focusin focus'イベントリスナの２重のガードで、IE以外は完全に動作が正常化されました。

説明文の修正

2020/07/08 08:54

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -161,6 +161,8 @@
 ~~HTMLが提示されてないので動作確認は出来てません。ひょっとしたら```event.preventDefault();
 ```は必要かもしれません。そちらで動作確認し、適宜対応してください。~~
+firefoxのみ正しく動いて見えたのはfirefoxにバグがあってスクロールしなかったからで
+firefox以外のブラウザの動作が正常動作です。
 動作確認してみたところ、IEはバグっててダメでした、edge(WEBから落としてきた最新版のedge),chrome,firefoxでは一応問題ありませんでしたが、chromeでまれにスクロールする事がありましたが再度クリックで直ります。
 その他についてはソースにコメントを入れてあるので参照してください。

全ソース公開を受けて、コードの修正

2020/07/08 00:57

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -1,57 +1,167 @@
-HTMLが提示されてないので仮のクラス名を使ってます。
+~~HTMLが提示されてないので仮のクラス名を使ってます。~~
+### 全ソース公開を受けてソースコードを差し替えました
+jQueryプラグインSTICKY NAVIGATIONを使っているんですね。
+**プラグインを使用している場合はそのことを明記し、プラグインの公式へのリンクも記述してください。またスクリプトの一部だけではなく、全文を公開してください。おかげでプラグインあるのかー。ちゃんと問題ないかプラグインに影響を与えていないかテストしてて回答が遅れました**
 ```JavaScript
-$('a[href*="#"]')
-    // Remove links that don't actually link to anything
-    .not('[href="#"]')
-    .not('[href="#0"]')
-    .click(function (event) {
+$(function () {
-      // On-page links
+    /*FOR STICKY NAVIGATION*/
-      if (
+    var offsetY;
-        location.pathname.replace(/^//, "") ==
+    if (!$("nav").hasClass("sticky")) {
-          this.pathname.replace(/^//, "") &&
+        offsetY = $("nav").addClass("sticky").outerHeight();
-        location.hostname == this.hostname
-      ) {
-        // Figure out element to scroll to
-        var target = $(this.hash);
-        target = target.length
-          ? target
-          : $("[name=" + this.hash.slice(1) + "]");
+        $("nav").removeClass("sticky");
+    } else {
-        // Does a scroll target exist?
+        offsetY = $("nav").outerHeight();
-        if (target.length) {
+    }
-          // Only prevent default if animation is actually gonna happen
-          //event.preventDefault(); //下で return false;でデフォルトの処理を無効化しているので不要
-          // スクロールのオフセット値
-          var offsetY = jQuery('.nav-header').outerHeight(); //ナビゲーションバーのクラス名ないしはIDなどで特定し要素の高さを得る。PCとスマホでナビゲーションバーの高さが違ってもこういう取得の仕方であれば問題ない
-          $("html, body").animate(
+    $(".js--section-features").waypoint(
+      function (direction) {
+          if (direction == "down") {
+          $("nav").addClass("sticky");
+        } else {
+          $("nav").removeClass("sticky");
+        }
+      },
-            {
+      {
+        offset: offsetY,
+      }
+    );
+    $(".js--scroll-to-plans").click(function () {
+      $("html,body").animate(
+        {
-              scrollTop: target.offset().top - offsetY, //ナビゲーションバーの高さ分手前でスクロール
+          scrollTop: $(".js--section-plans").offset().top - offsetY,
-            },
+        },
+        1000
+      );
+    });
+    $(".js--scroll-to-start").click(function () {
+      $("html,body").animate(
+          {
+          scrollTop: $(".js--section-features").offset().top - offsetY,
+        },
+        1000
+      );
+    });
+    $('a[href*="#"]')
+      // Remove links that don't actually link to anything
+      .not('[href="#"]')
+      .not('[href="#0"]')
+      .click(function (event) {
+        // On-page links
+        if (
+          location.pathname.replace(/^//, "") ==
+            this.pathname.replace(/^//, "") &&
+          location.hostname == this.hostname
+        ) {
+          // Figure out element to scroll to
+          var target = $(this.hash); //ここでjQueryオブジェクトに変換済み
+          target = target.length
+            ? target
+            : $("[name=" + this.hash.slice(1) + "]");
+          // Does a scroll target exist?
+          if (target.length) {
+            // Only prevent default if animation is actually gonna happen
+            //event.preventDefault();
+            $("html,body").animate(
+              {
+                scrollTop: target.offset().top - offsetY,
+              },
-            1000,
+              1000,
-            function () {
+              function () {
-              // Callback after animation
+                // Callback after animation
-              // Must change focus!
+                // Must change focus!
-              var $target = $(target);
+                target.focus(); //targetは既にjQueryオブジェクトになっているから変換は不要
-              $target.focus();
-              if ($target.is(":focus")) {
+                if (target.is(":focus")) {
-                // Checking if the target was focused
+                  // Checking if the target was focused
-                return false;
+                  return false;
-              } else {
+                } else {
-                $target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
+                  target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
-                $target.focus(); // Set focus again
+                  target.focus(); // Set focus again
+                }
               }
+            );
-            }
+          }
-          );
-        // ハッシュ書き換えとく、これで戻るボタンでページ内移動の履歴にしたがって戻ってくれる。
-		window.history.pushState(null, null, this.hash);
-		// デフォルトの処理はキャンセル
-		return false;
         }
+     });
+    $(".js--wp-1").waypoint(
+      function (direction) {
+        $(".js--wp-1").addClass("animated animate__fadeIn");
+      },
+      {
+        offset: "50%",
       }
+    );
+    $(".js--wp-2").waypoint(
+      function (direction) {
+        $(".js--wp-2").addClass("animated animate__fadeInUp");
+      },
+      {
+        offset: "50%",
+      }
+    );
+    $(".js--wp-3").waypoint(
+      function (direction) {
+        $(".js--wp-3").addClass("animated animate__fadeIn");
+      },
+      {
+        offset: "50%",
+      }
+    );
+    $(".js--wp-4").waypoint(
+      function (direction) {
+        $(".js--wp-4").addClass("animated animate__pulse");
+      },
+      {
+        offset: "50%",
+      }
+    );
+    $(".js--nav-icon").click(function () {
+      var nav = $(".js--main-nav");
+      var icon = $(".js--nav-icon i");
+      nav.slideToggle(200);
+      if (icon.hasClass("ion-navicon-round")) {
+        icon.addClass("ion-close-round");
+        icon.removeClass("ion-navicon-round");
+      } else {
+        icon.addClass("ion-navicon-round");
+        icon.removeClass("ion-close-round");
+      }
     });
+  });
+  // フォーカス系のイベントでのスクロール処理をキャンセルする。
+  //
+  // firefox以外のブラウザは要素がフォーカスされた場合、フォームのテキストエリアなど入力がスムーズに
+  // 出来るように、その要素をスクロールさせる。（正常な動き）その後その要素に対してselectが
+  // 発生します。
+  // firefoxはバグっててスクロールせずにフォーカスだけがあたる。
+  //
+  // コード内で要素.focus()する場合は、この解決策でも回避できない場合があります
+  // これでもたまにスクロールすることがあり、もう一度クリックすれば直ります。
+  // ブラウザ側の実装の問題なのでこれ以上は対処できません。
+  //
+  // 問題が無ければ、要素.focus()ではなく、要素.select()を検討してみて下さい
+  // そうすれば、スクロールの問題は解決するはずです。
+  $('section').bind('focusin focus', function(event){
+    event.preventDefault();
+  });
 ```
-HTMLが提示されてないので動作確認は出来てません。ひょっとしたら```event.preventDefault();
+~~HTMLが提示されてないので動作確認は出来てません。ひょっとしたら```event.preventDefault();
-```は必要かもしれません。そちらで動作確認し、適宜対応してください。
+```は必要かもしれません。そちらで動作確認し、適宜対応してください。~~
+動作確認してみたところ、IEはバグっててダメでした、edge(WEBから落としてきた最新版のedge),chrome,firefoxでは一応問題ありませんでしたが、chromeでまれにスクロールする事がありましたが再度クリックで直ります。
+その他についてはソースにコメントを入れてあるので参照してください。
+はぁ、プラグインもテストしてて予想外に疲れた･･･

説明を修整

2020/07/07 22:13

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -51,4 +51,7 @@
         }
       }
     });
-```
+```
+HTMLが提示されてないので動作確認は出来てません。ひょっとしたら```event.preventDefault();
+```は必要かもしれません。そちらで動作確認し、適宜対応してください。