Hatena::ブログ(Diary)

KAZUMiX memo

2009-02-12

scrollsmoothly.jsを更新しました

| scrollsmoothly.jsを更新しましたを含むブックマーク

こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル

地味に人気があるっぽいscrollsmoothly.jsを更新しました。使い方などは以下の元エントリーで確認できます。使い方自体は変わっていません。

更新内容

  • リンク先がページの先頭になることを前提としていたスクロール量の計算方法を変更。ページの終端付近のリンク先へのスクロールもスムーズになりました。

具体的には、次のサンプルのようにリンク先が最大スクロール先の描画領域の内側にある場合にスムーズではなかった問題を修正しました。

mitomito 2009/02/13 21:50 ややっ、修正していただき、ありがとうございます!
無敵になりました。徹底的に使わせていただきます(^^;
ありがとうございました〜!

KAZUMiXKAZUMiX 2009/02/14 01:20 ども。ご指摘を受けたときはドキュメントとウィンドウそれぞれの高さを幅を取得すれば簡単に計算できるやと思ってました。
が、そもそもその高さと幅の取得方法がブラウザによって全然違うどころか同じブラウザでも標準モードと互換モードで違うという現実にめげてました。取得できたと思ったらブラウザによってスクロールバーの幅が含まれていたりいなかったりというさらなる追い打ちがw (力技で解決)

pomapoma 2009/02/20 17:36 素晴らしいスクリプトですね!
デザインの幅が広がりそうです。
使用するに際して必要事項をお教え頂ければ幸いです!

KAZUMiXKAZUMiX 2009/02/21 15:03 pomaさん。
必要事項、ライセンス的なことでしたらMIT Licenseということで、改造しての再利用も可能です。商用、非商用サイトにかかわらずご利用できます。

pomapoma 2009/02/21 23:24 KAZUMiXさん。
了解しました!MIT Licenseですね。
知らなかったので調べました。
今後のご活躍をココロよりお祈り申し上げます!

みもちゃっくみもちゃっく 2009/02/27 15:34 国内外のJavascriptスクロールを比較しましたが、
ダントツ良いです。気持ちいいですね。
横スクロールもできるしスクロール速度も
簡単に変えられる。

こちらのページがGoogle検索で先頭にならないのが不思議です。
先頭だったら大きく時間短縮できたんですんが...

お礼がまだでした。 すみません。
ありがとうございました。理想的なスクロールを
使わせてもらえることに感謝しています。

にゃんにゃん 2009/04/01 09:27 大変便利なスクリプトを、ありがたく使用させて頂いております。
ひとつ質問なのですが、このスクリプトを使用して、
ページ内各箇所への移動は、アドレスにアンカーが付加されますが、
特定の場所、たとえばページの先頭(0,0)への移動のみ
アドレスにアンカーを付加せずに移動することは出来ないでしょうか?

KAZUMiXKAZUMiX 2009/04/03 17:50 >みもちゃっくさん
そういえば速度の変更は簡単なんですが、やりかたを書いてなかったことに気づきました。あとでソースに追加しておこうと思います。

>にゃんさん
アンカーは無いが、リンク先が自分自身のページだった場合は先頭へ移動する感じですかね?
現状そのような機能はありませんが、これに関してはそのようにした方がいいと思いますので、次の更新で対応したいと思います。

windowずwindowず 2009/09/17 15:15 おお、すんばらしいjs!
いまやってるプロジェクトに早速…、とおもったら、 CSSでbodyの高さをいじると
ダメなんすね。HTMLとCSSの構造を考え直すか

KAZUMiXKAZUMiX 2009/09/17 15:24 bodyにposition:relative;がかかってると駄目かもしれません。高さに関しては私も想定してませんでした。気になるので、暇を見て検証してみます。

pikpropikpro 2009/10/24 23:12 scrollsmoothly.jsを大切に使わせて頂いています。知り合いがこちらのサイトでDLページが見当たらないと言っておりますが、私がダウンロードしたファイルを差し上げてもよろしいでしょうか?再配布にあたるのでしょうか…?

KAZUMiXKAZUMiX 2009/10/25 16:22 >pikproさん
特に問題ありません。

kimukimu 2010/01/18 18:57 素晴らしいスクリプト。使わせてもらってますm(_ _)m。
あるページでは斜めスクロール、あるページでは縦スクロールのみにしたい場合、どうすればよいでしょうか…。。?

kimukimu 2010/01/18 21:41 たびたびすみません。。
“targetX”と“parseInt(nextX)”を“0”にして、
“targetHash = hash”というのを取ったら横スクロールしなくなりました。
お邪魔だけしてすみませんでした。。。m(_ _)m

じゃりおんじゃりおん 2010/02/28 00:25 さっそくDLさせていただきテストしていたのですが、
クリッカブルマップのリンクからもスクロールさせたい場合、どこを修正したら良いのでしょうか…?

degodego 2011/07/30 14:41 素晴らしいjsで大変ありがたく使わせていただいております。ありがとうございます!
縦書きサイトにも使わせていただこうと<html>にdir="rtl"を付け、cssのdiv#section**のleftをrightに変更したところ、IE,firefox,operaは問題なかったのですが、googlechromeだけナビのテーブルが横へのスクロールについてこられなくなりました・・・。
chromeでの正しい表示はできますでしょうか?

CJ?ごろうCJ?ごろう 2014/03/21 02:44 改造して別枠でコメントを足したという理由もありますが、スクリプトをminify化したとき、スクリプト本体に比べてライセンスのコメント部分が比率的大きくなります。

可能な範囲内でライセンス部分に書かれているコメントが別のテキストファイルになれば、ファイルサイズを削減できて良いと思います。

宜しければご検討いただけると助かります。

トラックバック - http://d.hatena.ne.jp/KAZUMiX/20090212/scrollsmoothlyUpdate