質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

2404閲覧

ページ上部にスクロール設定について

sutosi

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/08/18 16:06

ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。
ご教授頂けますと嬉しいです、よろしくお願い致します。

<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>nitta</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ // 「ページトップへ戻るボタン」の要素を隠します $('#pagetop').hide(); // スクロールした場合のアクションが記されています $(window).scroll(function(){ // スクロール位置が1000pxを超えた場合に「ページトップへ戻るボタン」をフェードインで出現させる if ($(this).scrollTop() &gt; 1000) { $('#pagetop').fadeIn(); } // スクロール位置が1000px以下の場合は「ページトップへ戻るボタン」を消しておく(フェードアウトで消える) else { $('#pagetop').fadeOut(); } }); // 「ページトップへ戻るボタン」をクリックした場合のページトップへ戻るスピードの速さが記されています $('#pagetop').click(function(){ $('html,body').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </head> <body> <div class="top"> <ul class="menu" > <!-- <li>PROFILE</li>--> <!-- <li>GRAPHIC</li>--> <!-- <li>MUSIC</li>--> <!-- <li>CONTACT</li>--> <!-- --> <a href="#contact" class="btn"> CONTACT </a> <a href="#music" class="btn"> MUSIC </a> <a href="#graphics" class="btn"> GRAPHICS </a> <a href="#profile" class="btn"> PROFILE </a><!-- このhrefで指定したものを別のとこのid=""で指定してジャンプする--> </ul> <p><img src="img/rogo.png"></p><!--ロゴ--> </div> <header> <section class="icon"> <!-- <p><img src="img/profile.png"></p>背景画像を指定--> </section> <section class="profile"> <h2 id="profile">PROFILE</h2><!--ここでidを指定し、メニューから移動する--> <div class="photo-show"> <img src="img/pro1.jpg"> <img src="img/pro2.jpg"> <img src="img/pro3.jpg"> <img src="img/pro4.jpg"> </div> <div class="text"> <p>自転車に乗ったり音楽やったりデザインをしています。</p> </div> </section> <section class="gra"><!--section2--> <h2 id="graphics">GRAPHICS</h2> <div class="container"> <div class="item"> <a href="prev1.html"><img src="img/gra1.jpg"></a> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <a href="prev2.html"><img src="img/gra2.jpg"></a> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <a href="prev3.html"><img src="img/gra3.jpg"></a> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <a href="prev4.html"><img src="img/gra4.jpg"></a> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <a href="prev5.html"><img src="img/gra5.jpg"></a> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <a href="prev6.html"><img src="img/gra6.jpg"></a> <p>hello. hello. hello. hello.</p> </div> </div> </div> </section> <section class="music"> </section> <section class="music"> <h2 id="music">MUSIC</h2> <div class="music-container"> <div class="music-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" allowfullscreen></iframe><!--youtubeの埋め込みリンク--> </div> </div> </div> </section> <section class="contact"> <h2 id="contact">CONTACT</h2> <div class="contacttext"> <p>kasikoihokennda@yahoo.co.jp</p> </div> </section> </header> <footer> <div class="top"> <div class="sita"> <img src="img/footer.png"> <p id="pagetop"><a href="index.html"><img src="img/rogo.png" height="70" width="70" alt="ページトップボタン"></a></p> </div> </div> </footer> </body> </html> コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

文字数の関係でここにcssを記述致します。

```@charset "utf-8"; /* background-image: url("../img/wallpaper.jpg");*/ body{/*初期設定、余計なmargin,paddingを0に*/ font-size: 14px; font-family: Verdana, sans-serif; margin: 0; padding: 0; background: #f2f2f2; /*初期設定*/ } p{/*行間がゆったりする*/ line-height: 2; } .top { width: 90%; margin: 0 auto; } .menu { display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ list-style: none; padding: 0; margin: 0; /*余計なマージンパディング取る、*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*------------ボタンアニメーション---------------------*/ .btn::before { content: ''; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 1px; background: #000000; display: block; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1) } .btn:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1) } .btn{ padding: 15px 100px; margin:10px 4px; color: #000000; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; display: inline-block;/*横にする設定*/ cursor: pointer; margin: 15px; padding: 0; display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*---------------------------------*/ .top img { display: inline-block;/*横にする設定*/ width: 50px; height: 50px; text-align: left; cursor: pointer; } .container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width:80%; margin: 0 auto; } .text{ width:80%; margin: 0 auto; text-align: center; max-width: 350px;} section{ background: #fff;/*ここを消してbodyに画像指定すると背景が設定できる*/ padding: 60px 0; } section h2{/*文字を中央ぞろえ、下にマージン空き*/ text-align: center; } section h3{/*graprevのせってい*/ text-align: center; } .icon{ /*背景画像*/ background-image: url("../img/wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed;/*背景を固定している*/ background-position: center; background-size:cover;/*背景画像をちゃんと表示*/ padding-bottom: 600px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ } .icon img{ display: block; margin-left: auto; margin-right: auto; width: 150px; height: 150px; } /*PROFILE*/ .profile .item{/*newsの囲っているやつを中央揃え*/ text-align: center; } .profile p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } /*features同様アイテム同士の空き*/ .profile .item{/*写真と文字を囲っているfeaturesの下の空き*/ margin-bottom: 10px; } .profile .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*GRAPHICS*/ .gra .container{ display: flex; justify-content: space-between;/*均等に余白が空く設定*/ } .gra .item{/*graに入っている画像と文字に対して30%*/ width: 30%; text-align: center; margin-bottom: 10px; } .gra .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ width: 100%; } .gra p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } .gra .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*contact*/ .contacttext{ width:80%; margin: 0 auto; text-align: center; max-width: 350px; padding: 100px 0;} /*-----------------------PREV--------------*/ .prevpic { margin: 0 auto; /*縦余白30pxは任意*/ text-align:center; margin-left:auto; margin-right:auto; } /*画像アニメーション*/ .photo-show { height: 440px; /*表示したい大きさ*/ margin: 30px auto; /*縦余白30pxは任意*/ max-width: 100%; /*position: relative;*/ width: 300px; /*表示したい大きさ、height と合わせる*/ } .photo-show img { animation: show 8s infinite; -webkit-animation: show 8s infinite; border-radius: 50%; /*height: auto;*/ max-width: 100%; opacity: 0; position: absolute; /*画像を全て重ねる*/ } /*アニメーション*/ @keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } @-webkit-keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } /*各画像のアニメーションの開始時間をずらす*/ .photo-show img:nth-of-type(1) { animation-delay: 0s; -webkit-animation-delay: 0s; } .photo-show img:nth-of-type(2) { animation-delay: 2s; -webkit-animation-delay: 2s; } .photo-show img:nth-of-type(3) { animation-delay: 4s; -webkit-animation-delay: 4s; } .photo-show img:nth-of-type(4) { animation-delay: 6s; -webkit-animation-delay: 6s; } /* .photo-show img:nth-of-type(5) { animation-delay: 8s; -webkit-animation-delay: 8s } .photo-show img:nth-of-type(6) { animation-delay: 10s; -webkit-animation-delay: 10s; } .photo-show img:nth-of-type(7) { animation-delay: 12s; -webkit-animation-delay: 12s; } .photo-show img:nth-of-type(8) { animation-delay: 14s; -webkit-animation-delay: 14s; }*/ /*マウスが画像に重なった際、動きを止めて四角くする*/ .photo-show img { transition: 0.2s; -webkit-transition: 0.2s; } .photo-show:hover img { animation-play-state: paused; -webkit-animation-play-state: paused; border-radius: 0; } /*MUSIC*/ .music-container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width: 80%; margin: 0 auto; } .music iframe{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .music-wrapper {/*padding-topかbottomで%を指定するとcssで、widthに対する比率となる、56.25はyoutubeの16:9の比率を指定*/ padding-bottom: 56.25%; height: 0; position: relative; } /*sita*/ .sita { display: block;/*横にする設定*/ width: 50px; height: 50px; margin: 0px auto; cursor: pointer; } #pagetop { position: fixed; bottom: 50px; right: 30px; } /*画面が570px以上になったとき*/ @media (min-width: 570px){ .container{ width: 570px; } .music-container{ width:570px; } } /*画面が570px以上になったとき*/ @media (min-width: 820px){ .container{ width: 820px; } .music-container{ width:820px; } }``` コード

投稿2017/08/18 16:07

sutosi

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

以下のコードで検証しましたが、状況が再現しませんでした。一度以下のコードを実行してみていただけませんか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>nitta</title> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 8 <style type="text/css">body{font-size:14px;font-family:Verdana,sans-serif;margin:0;padding:0;background:#f2f2f2}p{line-height:2}.top{width:90%;margin:0 auto}.menu{display:block;list-style:none;padding:0;margin:0}.btn::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#000;display:block;-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform 0.4s cubic-bezier(1,0,0,1);transition:transform 0.4s cubic-bezier(1,0,0,1)}.btn:hover::before{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1)}.btn{color:#000;font-family:sans-serif;text-transform:uppercase;text-align:center;position:relative;text-decoration:none;cursor:pointer;margin:15px;padding:0;display:block;float:right}.top img{display:inline-block;width:50px;height:50px;text-align:left;cursor:pointer}.container{width:80%;margin:0 auto}.text{width:80%;margin:0 auto;text-align:center;max-width:350px}section{background:#fff;padding:60px 0}section h2{text-align:center}section h3{text-align:center}.icon{background-image:url(https://placehold.jp/3d4070/ffffff/150x150.png?text=../img/wallpaper.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:cover;padding-bottom:600px}.icon img{display:block;margin-left:auto;margin-right:auto;width:150px;height:150px}.profile .item{text-align:center}.profile p{text-align:left}.profile .item{margin-bottom:10px}.profile .item:last-child{margin-bottom:0}.gra .container{display:flex;justify-content:space-between}.gra .item{width:30%;text-align:center;margin-bottom:10px}.gra .item img{width:100%}.gra p{text-align:left}.gra .item:last-child{margin-bottom:0}.contacttext{width:80%;margin:0 auto;text-align:center;max-width:350px;padding:100px 0}.photo-show{height:440px;margin:30px auto;max-width:100%;width:300px}.photo-show img{animation:show 8s infinite;-webkit-animation:show 8s infinite;border-radius:50%;max-width:100%;opacity:0;position:absolute}@keyframes show{0%{opacity:0}20%{opacity:1}30%{opacity:1}40%{opacity:0}}@-webkit-keyframes show{0%{opacity:0}20%{opacity:1}30%{opacity:1}40%{opacity:0}}.photo-show img:nth-of-type(1){animation-delay:0s;-webkit-animation-delay:0s}.photo-show img:nth-of-type(2){animation-delay:2s;-webkit-animation-delay:2s}.photo-show img:nth-of-type(3){animation-delay:4s;-webkit-animation-delay:4s}.photo-show img:nth-of-type(4){animation-delay:6s;-webkit-animation-delay:6s}.photo-show img{transition:0.2s;-webkit-transition:0.2s}.photo-show:hover img{animation-play-state:paused;-webkit-animation-play-state:paused;border-radius:0}.music-container{width:80%;margin:0 auto}.music iframe{position:absolute;width:100%;height:100%;top:0;left:0}.music-wrapper{padding-bottom:56.25%;height:0;position:relative}.sita{display:block;width:50px;height:50px;margin:0 auto;cursor:pointer}#pagetop{position:fixed;bottom:50px;right:30px}@media (min-width:570px){.container{width:570px}.music-container{width:570px}}@media (min-width:820px){.container{width:820px}.music-container{width:820px}}</style> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 10 <script> 11 $(function () { 12 $('#pagetop').hide(); 13 $(window).scroll(function () { 14 if ($(this).scrollTop() > 1000) { 15 $('#pagetop').fadeIn(); 16 } 17 else { 18 $('#pagetop').fadeOut(); 19 } 20 }); 21 $('#pagetop').click(function () { 22 $('html,body').animate({ 23 scrollTop: 0 24 }, 500); 25 return false; 26 }); 27 }); 28 </script> 29</head> 30<body> 31<div class="top"> 32 <ul class="menu"><!-- liタグがなかったので追加 --> 33 <li> 34 <a href="#contact" class="btn"> 35 CONTACT 36 </a> 37 </li> 38 <li> 39 <a href="#music" class="btn"> 40 MUSIC 41 </a> 42 </li> 43 <li> 44 <a href="#graphics" class="btn"> 45 GRAPHICS 46 </a> 47 </li> 48 <li> 49 <a href="#profile" class="btn"> 50 PROFILE 51 </a> 52 </li> 53 </ul> 54 <p> 55 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/rogo.png"> 56 </p> 57</div> 58<header> 59 <section class="icon"></section> 60 <section class="profile"> 61 <h2 id="profile">PROFILE</h2> 62 <div class="photo-show"> 63 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro1.jpg"> 64 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro2.jpg"> 65 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro3.jpg"> 66 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro4.jpg"> 67 </div> 68 <div class="text"> 69 <p>自転車に乗ったり音楽やったりデザインをしています。</p> 70 </div> 71 </section> 72 73 <section class="gra"> 74 <h2 id="graphics">GRAPHICS</h2> 75 <div class="container"> 76 <div class="item"> 77 <a href="prev1.html"> 78 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra1.jpg"> 79 </a> 80 <p>hello. hello. hello. hello.</p> 81 </div> 82 83 <div class="item"> 84 <a href="prev2.html"> 85 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra2.jpg"> 86 </a> 87 <p>hello. hello. hello. hello.</p> 88 </div> 89 90 <div class="item"> 91 <a href="prev3.html"> 92 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra3.jpg"> 93 </a> 94 <p>hello. hello. hello. hello.</p> 95 </div> 96 97 </div> 98 <div class="container"> 99 <div class="item"> 100 <a href="prev4.html"> 101 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra4.jpg"> 102 </a> 103 <p>hello. hello. hello. hello.</p> 104 </div> 105 106 <div class="item"> 107 <a href="prev5.html"> 108 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra5.jpg"> 109 </a> 110 <p>hello. hello. hello. hello.</p> 111 </div> 112 113 <div class="item"> 114 <a href="prev6.html"> 115 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra6.jpg"> 116 </a> 117 <p>hello. hello. hello. hello.</p> 118 </div> 119 </div> 120 <!-- </div> 不要なdivタグ --> 121 </section> 122 <!-- <section class="music"></section> 2つある意味がわからないのでコメントアウト --> 123 <section class="music"> 124 <h2 id="music">MUSIC</h2> 125 <div class="music-container"> 126 <div class="music-wrapper"> 127 <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" 128 allowfullscreen></iframe> 129 </div> 130 </div> 131 </section> 132 <section class="contact"> 133 <h2 id="contact">CONTACT</h2> 134 <div class="contacttext"> 135 <p>mail address</p> 136 </div> 137 <!-- </div> 不要なdivタグ --> 138 </section> 139</header> 140<footer> 141 <div class="top"> 142 <div class="sita"> 143 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/footer.png"> 144 <p id="pagetop"> 145 <a href="index.html"> 146 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/rogo.png" 147 height="70" 148 width="70" 149 alt="ページトップボタン"> 150 </a> 151 </p> 152 </div> 153 </div> 154</footer> 155</body> 156</html>

投稿2017/08/18 20:22

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sutosi

2017/08/19 09:00

こちらの0番のhtmlの記述はどこの部分を変更したのでしょうか。 ご教授お願いいたします。
s8_chu

2017/08/19 09:02

「0番のhtmlの記述」とはなんでしょうか?
sutosi

2017/08/19 09:06

JavaScriptの記述は合ってます。 https://codepen.io/rekid/pen/zdRPab 1.p#pagetop を footer から外に出してあげてください。 ↑この上に記述していただいたhtmlコードです。
s8_chu

2017/08/19 09:10

それは、私ではない回答者さんの回答文の内容ではないかと思いますが、`footer要素`に囲まれていた`#pagetop`を持つ`p要素`を`footer要素`の外に出したのではないでしょうか?
guest

0

JavaScriptの記述は合ってます。

https://codepen.io/rekid/pen/zdRPab

1.p#pagetop を footer から外に出してあげてください。

<!-- 変更前 --> <footer> <div class="top"> <div class="sita"> <img src="img/footer.png"> <p id="pagetop"><a href="index.html"><img src="img/rogo.png" height="70" width="70" alt="ページトップボタン"></a></p> </div> </div> </footer>
<!-- 変更後 --> <footer> <div class="top"> <div class="sita"> <img src="img/footer.png"> </div> </div> </footer> <p id="pagetop"><a href="index.html"><img src="img/rogo.png" height="70" width="70" alt="ページトップボタン"></a></p>

**2. styleを使って、position:fixed;の指定をしてあげてください **

#pagetop{ position: fixed; bottom: 15px; right: 15px; }

コードはこちらからも確認できます。
https://codepen.io/rekid/pen/zdRPab

投稿2017/08/18 16:24

Nkei8N

総合スコア28

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/08/18 20:25

横から失礼します。質問者さんのコードでは、#pagetopに対して既にpositionプロパティでfixedが設定されていると思いますが、いかがでしょうか?
Nkei8N

2017/08/19 04:21

確かに!おっしゃる通りですね。 追記のCSSの部分見逃しておりました。 指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問