jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
less - jQueryで画面をスクロールさせる時の注意点
jQueryを使って画面をスクロールさせる場合animateメソッドとscrollToプロパティを組み合わせるのが一般的です。 selector.animate({ scrollTop: 0 }); // ページの一番上にスクロール この時どのセレクタに対して実行すべきかはブラウザごとに異なります。詳しくはjQueryでscrollToを使うときの注意点 - NoteBookにまとまっていてありがたいです。簡単に言うとWebKitではbodyに効き、それ以外のブラウザではhtmlに効きます。 $('html').animate({ scrollTop: 0 }); // WebKit以外 $('body').animate({ scrollTop: 0 }); // WebKit これに対して var selector = $('html, body'); のように両方を指定してクロスブラ
縦長いページデザインは是か否か？ 楽天におけるスクロール量計測導入の裏側
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
スクロール量を計測し埋もれたエリアを活用する :: 実践CMS*IA
Omniture Summit 2010で披露されたスクロール計測のプラグインが、公式ブログで公開されています。 その後、元Omniture社員のAdam Greco氏が改造版を公開しています。こちらの方がニーズに合ったので、そのまま導入してあります。 分かるようになるのは以下の3つ スクロールしない状態でどこまで見えていたか スクロールした量 結果的にどこまで表示させたか オリジナルのプラグインは3のみに対応していました。改造版は2と3を結合して一つの変数に格納します。3から2を引けば1になるので、計算結果のTSVファイルを作成&アップロードすれば、1から3まで全てのレポートが完成します。 図:スクロール関連の指標: ページとこれらをクロス集計する と、大きなヒントが得られます。 「ページを開いてから次のページへ移動するまでの時間」 という意味の滞在時間よりも、 「能動的に意思を持ったス
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」:phpspot開発日誌
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法
JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]省スペースにフェードと自動スクロールで表示するスクリプト -Simple Spy
HugeDomains.com
HugeDomains.com