こんにちは。ネットショップコンサルタント「たぶ」(@yusuke_tanaka34)です。
今日は『スムーススクロールが「トップへ戻る」だけ効かない時の修正方法』をご紹介します！
ホームページやネットショップの制作をしていると、けっこうあるあるなんです。
他のスムーススクロールはうまく動くのに、「トップへ戻る」だけ効かない時ってありますよね。
僕もよく「あれ？おかしいなぁ。全部効かないならまだしも、トップへ戻るだけ効かないなんて・・・」と思う事があります。
でも、実際はすごく簡単に直せちゃったりするんです。
この記事に書いた方法を試してもらうだけで、スムーススクロールが「トップへ戻る」だけ効かないという現象を直すことができます。
それでは、この記事を参考に『スムーススクロールが「トップへ戻る」だけ効かない』という問題を修正して時短しちゃってくださいね。
スポンサーリンク
スムーススクロールが「トップへ戻る」だけ効かない時に確認すること
スムーススクロールが「トップへ戻る」だけ効かない時に確認することは2つ。
- 「トップへ戻る」ボタン用に記述したコードがないか確認
- 「id=”top”」がちゃんと記述されているか確認
この2つを確認すると、だいたいスムーススクロールが「トップへ戻る」だけ効かない時の修正はできると思います。
1番目の『「トップへ戻る」ボタン用に記述したコードがないかどうか確認』は知らないうちに「トップへ戻る」ボタン用の記述がされている場合があるためです。
似たような記述が2回あったり、上書きのような形がされたりしていて「トップへ戻る」部分の記述が効いていない可能性があります。
2番目の『「id=”top”」がちゃんと記述されているか』は上記のような「トップへ戻る」ボタン用の記述がされていた場合、その記述を消すと「id=”top”」のような飛ぶ先の記述がない場合が出てくるためです。
ページのトップへ飛ぶような指定がされていて、そのコードを消した場合、「id=”top”」がちゃんと指定されていないと戻る先がなくなってしまうため、「id=”top”」を記述しなくてはいけません。
そんなに難しい事ではないのですが、まったくヒントのない状態から原因を探すとけっこう時間がかかってしまいます。
結局、原因を探すのに1時間くらいかかってしまいましたし、分かった時は「なるほど、これかぁ・・・。」と思いました。(笑)
それでは、実際の記述をもとにご説明していきますね。
スムーススクロールの記述は以下のとおり。
<a href="#top" id="page_top">PAGE TOP</a>
<script>
jQuery(function(){
jQuery('a[href^="#"]').click(function() {
var speed = 400; //スクロールの速度(1,000分の1秒単位)
var href= jQuery(this).attr("href");
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
この記述をもとに、各項目ごとに詳しい方法を見ていきますね。
「トップへ戻る」ボタン用に記述したコードがないか確認
特にフリーのテンプレートなどを修正する際にありがちなのですが、すでに「トップへ戻る」用のスムーススクロールの記載がされている場合があります。
そうすると、あとから自分が書き込んだスムーススクロールの記述と重複してしまうため、うまく効かないということがよく起こります。
例えば、トップへ戻るボタン用の記述はこんな感じ。
<script>
(function($) {
$(function(){
var $page_top = $('#page_top');
$(window).on('scroll', function(){
if ($(this).scrollTop() > 100) {
$page_top.fadeIn();
} else {
$page_top.stop(true, true).fadeOut();
}
});
$page_top.click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
})(jQuery);
</script>
先ほど書き込んだスムーススクロールの記述以外に、こんな感じの記述があると「トップへ戻る」ボタン用の記述がうまく効かない事が多々あります。
上記の記述、「#top」に戻る記述ではなく、「ページのトップへ戻るよ。」という記述です。
なので、最初に書いたスムーススクロールを記述すると、ページのトップへ戻らなくなります。
こういった感じの記述があった場合は、消してしまいましょう。
最初に書いたスムーススクロールのコードで、今回の「トップへ戻る」ボタン用の記述もカバーできてしまうからです。
しかし、この記述を消してしまうと、「トップへ戻る」の戻る先がないことになってしまいます。
そこで、次に「id=”○○”」を記述しましょう。
スポンサーリンク
「id=”top”」がちゃんと記述されているか確認
次に『「id=”top”」がちゃんと記述されているか確認』します。
最初に書いたスムーススクロールは『「a href=”#○○”」と記述したボタンを押すと、「id=”○○”」までスムースにスクロールしますよ。』という記述です。
しかし、次に書いた「トップへ戻る」ボタン用の記述は、「ページのトップへ戻りますよ。」という記述だったので、「id=”○○”」をめがけて飛んでくれないのです。
ということは、ページの上の方に「id=”○○”」と記述しないといけないというわけです。
分かりやすいように「body」に「id=”top”」と記述して「body id=”top”」などとするのがいいと思います。
<body id="top"> <!-- コンテンツ --> </body>
これで最初に記述した「トップへ戻る」ボタンは「body」の先頭に向けて飛んでくれます。
「id=”top”」を入れる場所は必ずしも「body」でなくても大丈夫です。
ページの中で最初の方に入っている「id」を指定していただければ、うまく飛ぶと思います。
スポンサーリンク
まとめ
今回は「スムーススクロールが「トップへ戻る」だけ効かない時の修正方法」というテーマでお送りしてきました。
スムーススクロールが「トップへ戻る」だけ効かないという現象はうまく直りましたでしょうか？
もう一度おさらいですが、『スムーススクロールが「トップへ戻る」だけ効かない現象』を直す方法は、
- 「トップへ戻る」ボタン用に記述したコードがないか確認
- 「id=”top”」がちゃんと記述されているか確認
という2つの記述を確認するという方法でした。
結構簡単な事ではありますが見落としがちなことですし、まったくヒントがないところから探すとなると時間がかかってしまうので、この記事で少しでも早く解決してくれたら嬉しいです！
「この記事に書いてあった方法を試したけど直らなかったよ。」という場合は、お問い合わせまでご連絡ください。
また、Webサイトの制作やネットショップの運営に関して、気になる事があればいつでもご連絡くださいね。
以上、ネットショップコンサルタントの「たぶ」でした。
Webサイトの制作に関しては、こちらの記事もおすすめです。
第1階層がリンクではないドロップダウンメニューを作りたい時ってありませんか？その方法を解説しています。
リストのaタグを親要素いっぱいにして上下中央揃えにする方法を書きました。
ホームページに地図を埋め込む時、Googleマップだとユーザーにも便利ですよね。Googleマップの埋め込み方をまとめました。
【WebデザインならLIG】
【プログラミングはTECH::CAMP】
