配信(準備)
      ホームに戻る
      2. 配信(準備)

      アンカーリンクを設置する

      クリックでページ内の指定位置に移動できます。

      設置方法

      Widgetで設置する場合


      1. 飛び元と飛び先のWidgetを追加
      2. 飛び先に<div>でユニークなidを追加
      <div id=heading1>...</div> 
      <div id=heading2>...</div> etc.

       3.　飛び元に<a>で対応する飛び先のへのリンクを設置

      <a href="#heading1">...</a>
      <a href="#heading2">...</a>

      ※ 飛び先に移動するURLを出力する場合は、URLの末尾に「#ユニークid」を追加してください。

      例：

      追加前：https://example.com/page

      追加後：https://example.com/page#heading1

       


      内部リンク機能で設置する場合

      ※同一の遷移先に複数の遷移元を設置する場合は、Widgetをご利用ください。


      1. 飛び元に指定したい箇所を選択し、リンク挿入をクリック
      2. 「内部」を選択
      3. 飛び先を指定し、「設置」をクリック

      任意設定

      遷移先までのスクロールをスムーズに変更する

      以下のWidgetをページ内に設置します。

      カテゴリー名：アクション
      Widget名：ページ内アンカーリンク（スムーズスクロール）（要JavaScript）

       

       

      遷移先までのスクロールを早くする

      以下のコードをタグ設定のJavaScript headに追記します。

      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 
      <script> 
      $(function(){ 
      $("a[href^='#']").click(function() { 
      var speed = 100; // スクロール速度(ミリ秒) 
      var href = $(this).attr("href"); 
      var target = $(href == "#" || href == "" ? 'html' : href); 
      var position = target.offset().top; 
      $('html').animate({scrollTop:position}, speed, 'swing'); 
      return false; 
      }); 
      }); 
      </script>

      アンカーリンクの到達位置がズレる場合

      Squad beyondでは画像／動画に対して自動的にlazyload（遅延読み込み）が適用される影響で、アンカーリンクの到達位置がズレる場合があります。

      下記記述をJavascriptのbodyの一番上に追加することで、lazyloadを解除して事象を解消することが可能です。

      ※ただし、この対応により、LPの読み込み時にすべての画像・動画が即時読み込まれるため、ページの表示速度が低下する可能性があります。導入は必要性に応じてご判断ください。

      <script>lazyLoadInstance.loadAll();</script>