サポート » 使い方全般 » スクロールトップ と スムーズスクロールが併用できない

  • 解決済 sasasa24

    (@sasasa24)


    トップへ戻るスクリプトとページ内スムーズスクロールのスクリプトを設置したのですが、
    干渉しあっているのか、どちらも動きません。

    ↓スムーズスクロール

    <script>
    jQuery(function(){
       // #で始まるアンカーをクリックした場合に処理
       jQuery('a[href^=#]').click(function() {
          // スクロールの速度
          var speed = 400; // ミリ秒
          // アンカーの値取得
          var href= jQuery(this).attr("href");
          // 移動先を取得
          var target = jQuery(href == "#" || href == "" ? 'html' : href);
          // 移動先を数値で取得
          var position = target.offset().top;
          // スムーススクロール
          jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
          return false;
       });
    });
    <script>

    ↓トップへ戻る

    <script>
    jQuery(function(){
       jQuery('a[href^=#]').click(function() {
          var speed = 400;
          var href= jQuery(this).attr("href");
          var target = jQuery(href == "#" || href == "" ? 'html' : href);
          var position = target.offset().top;
          jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
          return false;
       });
    });
    </script>

    ちなみに、footer.phpに、wp_footerより前に記述しています。
    トップへ戻るよりスムーズスクロールを下に記述すると、トップへ戻るのみ動きます。
    逆にすると両方動かなくなります。
    また、トップへ戻るを停止させてもスムーズスクロールは動作しませんでした。
    これはページ内リンクがうまく動作していないのが原因でしょうか。。
    http://~/#xxxと書けばページ内リンクも動くのですが・・・
    どなたか原因が分かれば教えて頂けないでしょうか。御願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    footer.phpに直接記述しているとのことですが、WordPressでjQuery依存のスクリプトを読み込む場合、wp_enqueue_scriptの使用が推奨されています。

    参考サイト
    http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/
    http://morilog.com/wordpress/js/wp_enqueue_script/

    そもそものスクリプトの内容に関してですが、直接WordPressに関連する箇所ではないので最低限のヒントのみにとどめておきます。(JSならstackoverflowとかのほうがいいかも)

    まず、「スムーズスクロール」と「トップへ戻る」のコードの内容が、コメントがあるなしだけで全く同じです。2つある必要はありません。
    そして、「トップへ戻る」という機能はJSではなくHTML側の指示によるものなので、「トップへ戻る」というJS自体がそもそも不要ということになります。


    現行のWordPressに同梱されているjQueryのバージョンであれば
    [href^=#] → [href^=”#”] とすべきでしょう

    トピック投稿者 sasasa24

    (@sasasa24)

    mypacecreator様

    アドバイスありがとうございました!
    wp_enqueue_scriptを使用し、「トップへ戻る」JSを削除いたしましたら、正常に動きました。
    [href^=”#”]に訂正もいたしました。
    とても困っていたので助かりました。ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「スクロールトップ と スムーズスクロールが併用できない」には新たに返信することはできません。