jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」
jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。 このプラグインは以下のページの振舞いに触発されて作りました。 Phusion Passenger users guide, Apache version １．サンプル サンプルを用意しました。 サンプル スクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。 逆スクロールしても、同じように見出しのタイトルを遡って表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。 jquery.displayheading_0.0.1.js 以下、設定方法です。 ３．HTML 見出しの内容を表示させたいHTMLを、body終了タグ
[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js
Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD
[JS]これは楽しい！スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp
HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。 デモページ：タブ scrollUpの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.js"></script> デザインをそのまま使用する場合は、スタイルシートもテーマごとに用意されています。 <link id="scrollUpTheme" rel="stylesheet" href="css/themes/link.css"> <li
リロードしたときにjQueryでページの先頭にスクロールさせる方法
ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。 リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール（＝要はページの先頭を表示）させる手段がみつかりませんでした。 別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。 １．JavaScriptのscrollTo()を使ったスクロール まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。 window.onload = function(){ window.scrollTo(0,0); } 動作結果は次の通りです。 Firefox：ページトップに移動するが、スクロールバーは戻らない Chrome：ペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
