困ってる人
こんにちは、ikuxxと申します。
という事で、今回作るトップページに戻るボタンがこんな感じ ↓
画面の白い部分を下にスクロールすると、ボタンが現れます。
See the Pen
qwwbqo by よろろぐ / Yololog (@malg_tw)
on CodePen.
【コピペでOK】下にスクロールした後, トップへ戻るボタンを表示する方法
ボタンのデザインなんかを変える時は「CSS」部分を変える必要がありますが、
それ以外は、基本的には全てコピペでOK。
HTML部分
|
1 |
<div id="top-btn">TOP</div> |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// CSS部分 #top-btn { position: fixed; display: inline-block; bottom: 30px; right: 40px; background-color: #000; color: #fff; font-size: 22px; font-weight: bold; padding: 10px 20px; border-radius: 100px; } #top-btn:hover { background-color: #333; cursor: pointer; } |
jQuery部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// jQuery部分 $(function() { var toppage = $('#top-btn'); // 変数 toppage.hide(); // まず始めはボタンを隠す $(window).scroll(function () { if ($(this).scrollTop() > 10) { toppage.fadeIn(); // トップから10pxスクロールしたらfadeIn } else { toppage.fadeOut(); } }); toppage.click(function(){ // クリックしたら $('body,html').animate({ scrollTop: 0 // TOPまでスクロールして戻る }, 500); // 0.5秒かけて return false; }); }); |
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
ikuxx / いくさんぽ
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
最近はマレーシアに住んでるおかげで中国語もちょこちょこ伸びてきてます。
YouTubeもやってます。
このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい
最近はマレーシアに住んでいますが、数年後にはヨーロッパ、その後は中国に住みたいなと考えています。
また久々カナダに住むのもいいかも。
でも最終的にはやっぱり日本かな。
季節はあるし、食べ物も美味しいし
何だかんだでやっぱり日本は最高ですね。
サイトを見てる時にいちいち上までスクロールして戻るのが面倒
クリックしてトップページに戻るボタンってどうやって作るんだろう？
何か簡単な方法はないかなぁ？