スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）
（”追記”書きました。） 下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。 チュートリアルページ→webdesignerwall チュートリアルdemo→demo 上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。 チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、 下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。 <p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p> このspanの部分がスクロールボタンになります。 CSSをいじればスクロールボタンの位置やデザインなど変更できます。 ↓↓Demoを作
jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
prototype.jsを利用したスムーズなページスクロール | ユージック
prototype.jsを利用したスムーズなページスクロール 2007年3月14日 最新のPrototype version 1.5.1_rc1と最新のscript.aculo.usのeffects.jsをを使った超簡単でしかも高機能なページスクロールを実現できる記事を見つけたのでご紹介します。 auto-scrolling page navigation 以下のコードをauto-scroll.jsとして保存します。 Event.observe(window, 'load', function() { $$('a[href^=#]:not([href=#])').each(function(element) { element.observe('click', function(event) { new Effect.ScrollTo(this.hash.substr(1)); Event
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scriptaculous.jsでスムーススクロール。 – 伊藤清徳の垂直落下式ムーンサルトプレス
syboos.jp
