Movatterモバイル変換

nonsect id:nonsect

スクロールに関するnonsectのブックマーク (5)

1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
nonsect2014/03/10
サンプルたとてもわかりやすかった。ありがとう＆ありがとう。この記事のおかげで jQuery Bottom の使用をやめました。
jquery
スクロール
リンク
Items
Codex This is a list ofit ems from last.fm's GetHypedTracks Page 1Shape Glasser (#1 / ID 1) Souls Like the Wheels The Avett Brothers (#2 / ID 2) Prism Tim Hecker (#3 / ID 3) Taking Over JoeGoddard (#4 / ID 4)Brave This Storm Trivium (#5 / ID 5) Radiance Tim Hecker (#6 / ID 7) Live Room Tim Hecker (#7 / ID 8) Live Room Out Tim Hecker (#8 / ID 9)Black Refraction Tim Hecker (#9 / ID 14) Stigmata
nonsect2014/03/06
javascript
スクロール
サンプル
リンク
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。１．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプルページの一番下までスクロールすると自動的にコンテンツを表示します。なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。３．プラグインのダウンロードgithubのjQue
nonsect2014/03/05
jQuery
スクロール
イベント
リンク
クリエイターのためのWebテク講座 -無限スクロール
ツイッターやフェイスブックのタイムラインで、スクロールするごとに、過去の投稿が追加されます。そうすることで、最初の読み込みを少なくし、訪問時の待ち時間を軽減することが出来ます。今回は、そんな無限スクロールの仕組みを解説します。サンプルを見るスクロールが一番下に行ったことを検知する。サンプルでは、スクロールが下から100ピクセルの位置までスクロールすると、次の数字を加算して追加しています。まずは、このスクロールの下位置の検出をしましょう。 $(window).on("scroll" , function(e) { var bottomPos = 100; var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); //スクロールが下に行
nonsect2014/02/27
簡単なサンプルでわかりやすい。ありがとうありがとう。
jquery
スクロール
リンク
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。１．はじめに「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
nonsect2014/02/27
jQuery
SEO
スクロール
リンク
1