TOP

記事リンククリックで下記事へスクロールする設定

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

 


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

シリウスカスタム3

逆設定着地点


 

 

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

 

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

 

 

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

 


 

 

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

 

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

 

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

 

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

 

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

 

 

上記の関連サイトで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 と指定しておけば
同じIDのあるコード地点で着地します

 

 

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

 


 

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

 

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

 

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

 

 

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

 

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

 

 

ここで着地

シリウスカスタム1

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

 

 

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

 

 

 

 

 

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

 

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

 

 

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

 

 

 

 

ここでも着地してます

シリウスカスタム2

 


 

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

 

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

 

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

 

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

 

 

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

 

 

 

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

 

 

上にスクロールします

 

 

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

シリウスカスタム3

 

 

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

 

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

 

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

 

 

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

 

 

スポンサーリンク

 

 

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

記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ関連解説
ページトップにスクロールするボタン1.4.3/jquery採用
jqueryプラグイン 1.4.3/jquery.min.jsでサイト左にスクロールボタンを取り付けます ボタン画像はシリウス画像ですので好みに変えられます
シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法
SIRIUS.シリウスカスタマイズ サイトの記事欄上部から サイト巻末まで逆スクロールするテキストボタン取り付けのカスタマイズで エントリーメニューへすぐ到達できます