ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。 ダウンロード 使い方 下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.smoothScroll.js"></script> あとは普通にページ内リンクを設定するだけです。 <div id="header"> ヘッダー内容
[jQuery] jQuery.animation() でスクロールをアニメーション処理
ページ内リンクへの移動をアニメーションで実行したいと思い立ってjQueryのマニュアルを確認したところ、 特別なプラグインを導入しなくても、jQuery.animate() メソッドで実現できることがわかったのでまとめました。 .animate() に渡せるプロパティー .animate() メソッドでは、アニメーションの動きを、cssプロパティと値を定義したオブジェクトを渡して指定します。 基本的に、数値を指定できるcssプロパティ(width, height, opacity など)のみ指定できますが、 cssのプロパティ以外でも、scrollTop ,scrollLeft など、アニメーション可能なプロパティが定義されています。 今回は下方向に画面をスクロールさせたいので、アニメーションさせるプロパティに"scrollTop"を指定します。 scrollTop で下方向にスクロール
![[jQuery] jQuery.animation() でスクロールをアニメーション処理](https://cdn-ak-scissors.b.st-hatena.com/image/square/315b713d10fe2376c56a35d6ee62956512270123/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fblogger_img_proxy%2FAEn0k_scA0rk3S-AUozGe0pFUsVaKFO9ztpavya8QnwD0ND8_aa967VQ3Fu_voyd9MFi3YJbbtDnTllQmO-NGza5hS8qcZz78ERP32zaWakLFwzDk4--ENJyFQFs9khRiQLE0_o%3Dw1200-h630-p-k-no-nu)
Animated Scrolling with jQuery 1.2 » Learning jQuery - Tutorials and Information
A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Update This entry is deprec
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
Victor Coulon : Mon blog High Tech
Arrêter de fumer est un défi, mais avec la bonne méthode, vous pouvez y arriver. Il existe plusieurs solutions pour…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
