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

現在、当ブログは「最新記事」「記事(ページ別)」とも表示件数を 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ブログのテンプレート工房 【続きを閉じる】の使い方
関連記事
  関連商品のご紹介
【スポンサーリンク】

最終更新日時: 2016年01月20日(水)22:46:45
ブログパーツ

Comment 0

There are no comments yet.

Leave a comment