ウェブデザイナーのためのホームページ考察ブログ

WebデザイナーのためのWebページの考察を行うブログ。またはウェブページの作り方Tipsを語るブログ。

【jQuery】PageScrollerがなぜか動かない!ので、なんとかしてみた話

お久しぶりになってしました。

ワケあって今ちょっと忙しい日々が続いております。
また進展がありましたらご報告するかもしれません。

で、本題です。

ウェブ業界ではブクマ当たり前のcolissさんですが、
そんなcolissさんの提供されている『PageScroller』を僭越ながら私も使ってみました。

すると、

動かない!!(汗)


なんかミスったかなぁ・・・としばらくチェックしてみました。

まずjQuery2.x系を使っていたので1.x系に変更してみました。
が、特に変化なし。

funcyboxも利用していたので競合でもしたかな?と思いfuncyboxを削除。
が、特に変化なし。

ぐぬぬ・・・。とにかく、全てのcssjavascriptを削除。
動いた!!

が、画面がぐちゃぐちゃ。(当たり前ですが・・・)

何がいかんのや・・・と思い、ページスクロール系のプラグインを変更。

smoothScroll』を僭越ながら使わせていただくことにしました。

すると!!
動かない!!!

なんでじゃあああ!!!
と、早くも混乱し始めるが色々あった結果これが問題だった。

html,body{
height:100%;
overflow:auto;
}

この部分を(正確にはoverflowの方)削除すると、
『smoothScroll』は動いた!!

ただ『PageScroller』の方はやはり動かず・・・。
残念ながら今回は『smoothScroll』を使用することに決めました。

で、

なんで上記のようなコード書いてんの?

という話ですが、それはfuncyboxのせいだったわけです。

html,body{
height:100%;
}

このように記述しているサイトでfuncyboxを使うと、
画像を閉じたときにページのトップに戻ってしまい
とてつもなくイラつく状態になってしまいます。

そこで、こちらのサイト様が神対応されていました。
http://k1blog.com/web/design/post-1821/

その解決方法が

overflow:auto;

だったのです。

こいつを入れるとまじで修正されたので
やったぜ!」と無事対応を終えていました。

それが結局『funcybox』的には良くても『smoothScroll』的にはまずかったみたいです。

というわけで、悩み考えまして

html,body{
height:100%;
overflow:auto;
}

この部分をまるまる削除!!

削除してもページの見た目に支障がでないようにCSSを調整しました。

完璧に見た目を一緒には出来ませんでしたが、
まぁ問題なかろうと思う感じに調整して上記の記述をCSSから削除しました。

こういう問題があるのかぁ〜・・。
まだまだ経験が足りないなぁと感じる今日この頃です。

(P.S. もっといい修正方法がありましたら教えてください!)