WOWOW放映作品や最新劇場公開映画の出演者キャラを箇条書きで紹介しています。

 

ページ内をスムーズにスクロール

現在、当ブログは「最新記事」「記事(ページ別)」とも表示件数を 5件に
していますので、1ページの表示の長さがそれほど長くなる事はないと思います。

これまではタイトルをクリックすると各記事に直接、移動していましたが、
これを jQuery を使いスクロール状況が判るように変更してみました。

参考サイト:hatena chips スルスルっと気持ちよくページスクロール
      ブログが作りたい!「ページの先頭へ戻る」の常駐表示:CSS小技

試しに5件のタイトルの内、どれかをクリックして見て下さい。
(追記)H22.09.07.[懸案]
    タブ表記を導入した際、不具合が発生した為、現在は取り外しています。
トップに戻る場合は各記事の右下にある「PAGE TOP」ボタンをクリック。
(追記)H22.04.11.
    ページ共通で使える「TOP PAGE」ボタンを用意しました。
【方法】
(1)JSファイルをダウンロード
下記のスクリプトをhead内に設置する。(FC2ではファイル名の変更が必要)
・ jquery-1.3.2.min.js (55.9KB)
・ jquery.page-scroller-306.js (5.0KB)
注意)
・ 当ブログでは「jquery-1.3.2.min.js」は google から読み込み
・ 「jquery.page-scroller-306.js 」を圧縮して参照しています。


(2)各記事とヘッダーを紐付け
□ 各記事の先頭に移動する場合
<a href="#entry<%topentry_no>"><%topentry_title> </a>
□ ページの先頭に戻る場合
<a href="#header"><img src="(画像)" /></a>
※既設のアンカー #header まで戻る。

【問題点】
「追記の開閉」(read more)のおいて、追記文を閉じる際、
ページの先頭まで戻ってしまうようになった。
これまでは、表示位置が開閉ボタンの設置位置のまま開閉出来ていた。

対応策として、記事の先頭に移動するように変更した。
赤字部分を削除
<a href="#entry<%topentry_no>aa" title="続きを閉じる"
onclick="showMore(<%topentry_no>,0);return false;">
 参考サイト:FC2ブログのテンプレート工房 【続きを閉じる】の使い方
関連記事
【パソコン】 [jQuery] カテゴリ内のページ送り】 【スポンサーリンク】

最終更新日時: 2021年02月16日(火)22:37:26
コメント・トラックバック欄はクリックで開閉致します。
 ■ コメント投稿

Leave a comment

 ■ コメント一覧 0 件

Comment 0

There are no comments yet.
 ■ トラックバック一覧 0 件

【時系列ページ送り】