Interface.js(スムーススクロール)でブラウザー内のスクロールに変化
ブラウザーのアンカー機能を使った、TOPに戻る、又は目的の位置に移動する処理は標準のままだと、何かそっけなくて嫌だ!
なめらかなスクロール処理で、サイト内の移動をやわらかく演出したい!
こだわりのあるサイトオーナーは細部のつくりまでこだわっておられます。
いざ、このスムーススクロールを実装してみたのですが、IE,Firefox,Operaなどブラウザーによって、
オブジェクトの位置情報取得にバラつきがでてしまい自分で一から実装するのは一苦労な気もしました。。。
ゴリ押しでスムーススクロール機能を実装したまではいいのですが、ブラウザーがバージョンアップしたとたんに、動作が不安定又は動かなくなってしまう危険性がありました。
今後もブラウザーのバージョンアップの度に、仕様を確認して修正するのかと思うと、スムーススクロールなんて使わなくてもいいやって思ってしまうのでした。。。
いろいろとインターネットを調べてみると
jQueryとInterface.jsを使えば、簡単に機能を実装できるではありませんか?
同じ機能を実装しようと考えているクリエーターさんがいてることを実感してうれしく思いました。
ブラウザーのバージョンアップなどの対応は他人任せ!いいものはどんどん使うのがお気軽プログラマーの第一歩ですね。
Interface.js
interface.eyecon.ro/
1 |
≶script src="../jquery.js" type="text/javascript">≶/script>≶script src="../interface.js" type="text/javascript">≶/script>$(function(){ $('#GoToTop a').click(function(){ $('#top').ScrollTo(1000, 'easeout'); return false; });}) |