2015　0112...2017　0825更新
シリウス外部カスタマイズ　途中記事をぶっ飛んで目的地へ着陸

 

---

ここの２行はページ戻る指定のテスト位置例です…無視してください

逆設定着地点

---

 

 

今回の解説はjqueryを必要とします
こちらのサイトのステップアップカスタマイズとなりますので
詳細をご確認ください...
ページトップにスクロールするボタン1.4.3/jquery採用

 

こちらはＨＴＭＬテンプレートに設置する解説です
シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法

 

 

jqueryダウンロード　ＨＴＭＬ　ＨＥＲＤ内記載スタイルシート記載までは
同手順ですが、ここでは記事内に個別に設定する方法となります

 

---

 

 

記事の上部のページ目次や上部の記事内リンクをクリックすると

 

記事中段や下段...その目的の位置まで瞬間自動スクロールするサイトを

 

ご覧になった経験はございませんか？

 

ブログなどでよくあるロング記事の場合　読者が目的地まで

 

手動スクロールなしで到達できる手段です

 

 

上記の関連サイトで1.4.3_jqueryの手順は終了していれば作動します

 

以下のリンクポチで作動確認いただけます

シリウスカスタム1

 

シリウスカスタム2

 

 

一つのページに複数の配置も可能..

 

以下にコードを二つ用意しました

 

出発点はサイト上部に張り付け

 

着地点は記事中段か..どこか？好みの位置に張り付け

 

---

 

出発点

 

<p id="back-whatsnew"><a href="#sirius1">シリウスカスタム1</a></p>
<p id="back-whatsnew"><a href="#sirius2">シリウスカスタム2</a></p>

 

出発地点の　sirius1　と着地点のid記載を同じにしてください　sirius1
出発地点のリンク内で　sirius1　と指定しておけば
同じＩＤのあるコード地点で着地します

 

 

着地点　別々の箇所へ貼り付けてください
<div id="sirius1">シリウスカスタム1</div>
<div id="sirius2">シリウスカスタム2</div>

 

---

 

中段　記事　下段記事で着地点コードは好みの位置に記載してください

 

着地点コードの文字
シリウスカスタム1
シリウスカスタム1
は　記載したくない場合は記載せずとも動きますので削除ＯＫです　

 

div要素はサイト上では認識できませんがＨＴＭＬの読み取りでは
確認されます

 

 

sirius1の記載は例えの記載ですので好みに変更してください

 

3つでも４つでも配置は可能ですが　ＩＤは個別に書き換えてください

 

 

ここで着地

移動が確認できましたか？
ここに..全ては見えませんが<div id="sirius1">シリウスカスタム1</div>の記述を置いているのですね

 

 

作動確認するため..意味もなくスペース開けてます..

 

 

 

 

 

参考
記事がロングランの場合上部、柄戻るも大切ですね

 

そんな場合は逆の設定を追加すればサイト上部にスクロ―ルする
設定をしましょう

 

 

以下のメニューで詳細をご覧ください

 

 

 

 

ここでも着地してます

 

---

 

ページトップへ戻る逆バージョンは以下

 

サイトにページトップへ戻るスクロールボタンを設置されていない場合でも

 

逆バージョンを追加すれば..中段..下段で記事を読み終えてから

 

リンクポチで記事上部へスクロールします

 

 

出発地点記載コードを下段か中段のメニュー項目ラストへＩＤを変えて追加

 

 

 

着地点をサイト上部に記載すると

 

 

上にスクロールします

 

 

以下例　クリックしてみてください

シリウスカスタム3

 

 

逆バージョン等と言ってますが

 

単に上下....逆の配置をしただけのことです

 

1.4.3/jqueryは設定しておけば各個別ページ　どこでも作動します

 

 

ロング記事を書く方は読者へのサービスに採用すると良いですね

 

 

スポンサーリンク

 

 

記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ
ページのトップに戻るスクロールボタンを取り付ける手順解説
シリウスカスタマイズトップ