中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

ページの先頭へスムーズに戻る jQuery プラグイン「Back to the Top」

ページの先頭 (トップ) へスムーズにスクロールして戻る jQueryプラグイン「Back to the Top」をリリースしました。

といっても作ったのが 3 年ほど前。作ったモノが貯まっているので、暇を見つけて公開できるモノはプロジェクトページを整備して公開してみました。

プロジェクトページはこちらから英語版もあります。

詳しい設定方法は、プロジェクトページに譲るとして、ページの先頭へのリンクは id 属性 backtothetop-fixed を加えるだけでスクロールしても位置が固定されるページの先頭へリンクが実装できます。ページ内リンクはリンク設定するだけ。

カスタマイズも data-* 属性を使ってできます。スクロールの停止位置を px で指定したり、スクロールの動き (イージング) を変えたり、ページの先頭へリンクの表示などいろいろオプションがあります。

サンプル

<a href="#top" id="backtothetop-fixed"
data-backtothetop-duration="600"
data-backtothetop-easing="easeOutQuart"
data-backtothetop-offset="100"
data-backtothetop-fixed-scroll-offset="500"
data-backtothetop-fixed-fadeIn="1000"
data-backtothetop-fixed-fadeOut="1000"
data-backtothetop-fixed-display="bottom-right"
data-backtothetop-fixed-bottom="10"
data-backtothetop-fixed-right="10"
>Back to the Top</a>

Project Page

Repository

パッチやバグ報告、プルリクは、GitHub からどうぞ。

背景画像の縦横比率にぴったり合ったサイズで表示するjQueryプラグイン「Background Fit」

「Background Fit」は、HTMLタグに設定した背景画像の縦横比率にぴったり合ったサイズで表示する jQuery プラグインです。

jQuery プラグイン「Background Fit」とスタイルシートの background-image プロパティとの違いは、背景画像の縦横比率に合ったサイズを計算して指定したブロック要素 (またはインライン要素) の表示サイズに調整して、背景画像を全面に表示します。

続きを読む

スタイルシートを切り替えるjQuery Plugin「CssSwitcher」アップグレード

スタイルシートを切り替える jQuery Plugin「CssSwitcher」をアップグレードしました。あわせて JavaScript 版もアップグレード。

改良点は二つ。

  • ソースの全面見直し。初期設定の仕方を変更しました。
  • ブラウザの戻るボタンで前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合の対処

二つ目はブラウザによって挙動が違うのですが、ブラウザで直前まで見ていたページの状態を復元する「Back Forward Cache」が働いているため、スタイルシートが反映されないことが起こっているようです。Firefox ではデフォルトで「Back Forward Cache」がオンの状態。

参考

続きを読む