jQuery

jQueryのページ内スクロールがうまく行かない時の意外な落とし穴



こんにちは、霙です。
つい先日、今まで何回やっても失敗していたことが解決したので、記念に記事にしたいと思います。 この記事は忘れん坊さん、うっかり屋さんなどにおすすめの記事ですw

どうして君だけ動かないの!!

このブログを作っている時、様々なサイトを参考にしながら自分の理想のデザインへと近づけていった訳ですが、 どーーーーーーしても、ページ内スクロールのjQueryだけがうまく動きませんでした。


jQueryのページスクロールのアレ、いっつも実装してもちっともなめらかにならないんだけど何なのウワァァァァァァヽ(`Д´)ノァァァァァァン! 他のjQueryは動くのにいつもソレだけ動かないッッ!!!!less than a minute ago via Janetter Favorite Retweet Reply


ちなみに今回わたしが参考にさせて頂いたのはWebクリエイターボックスさんの以下の記事。 わずらわしいプラグインの導入が不要な、とっても分かりやすいjQuery小技集です。

結局なにが問題だったかというと。

結論から申し上げますと、恥ずかしながらわたくし
ページ内リンクのやり方は以下のような古い方式しか知りませんでした

リンク元
<a href="#top">あそこへジャンプ!</a>
リンク先
<a name="top">あそこ</a>

こんな時代とっくに終わってました。
今やCSSの使用は当たり前の時代。
場所を指定するならidやclassがあるじゃあありませんか。
以下が今を生きるデザイナーが書くべきコード。(??)

リンク元
<a href="#top">あそこへジャンプ!</a>
リンク先
<div id="top">あそこ</div>

というわけで私が勘違いした下記のコード。
ピンクの部分はa nameじゃあなくてID名だったのでした!!!

jQuery
$(function(){
     $("#toTop a").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
     return false;
     })
});
リンク元
<p id="toTop"><a href="#wrapper">ページトップへ</a></p>
リンク先
<div id="wrapper">ページトップ</div>

私はここ↑(リンク先)をこれ↓にしたためjQueryが動かなかったのです。。

誤ったリンク先
<a name="wrapper">ページトップ</a>
てかこんなアホなことやるの私だけですよね・・。なんて需要のない記事なんだ!
もし私もやったよ!っていう方いたらこっそり教えてくださると勇気がでます。。w

 

聞くは一時の恥、聞かぬは一生の恥!!

photo by futurestreet

今回わたしは記事の冒頭であったとおり、出来ない旨をツイッターでおもいっきり叫びました。
tweetどころじゃない位おおきな声で。

そうしたら、心優しいイケメンフォロワーさん達がこれはどうだ、あれはどうだ、 ソース見せてごらんと本当に優しいリプライをくださいました( ;∀;)

皆さんにはご迷惑をかけてしまいましたが、お陰さまでここ1年くらいの疑問がやっと晴れたのです! 何か分からないことがあった時は、今回のように思い切ってつぶやいてみると解決するかもしれませんね!!

ちなみにソースを見せる方法

今回はソースを見せる前に解決してしまったので、私はまだネット上で人にソースを見せたことがないのですが、 以前かちびと様が記事でファイルビューアを紹介していらっしゃいましたので またこんな機会があった時はこちらを使ってみようかなと思っています。

以上、霙でした!!