シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営の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 からどうぞ。

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

購読