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

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

設置方法

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>

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

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>