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

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

ただいまの
回答率

90.32%

  • HTML5

    4307questions

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

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 762

sutosi

score 17

ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を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>

コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

文字数の関係でここに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;  
}  
}```

コード

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nitta</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <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>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('#pagetop').hide();
            $(window).scroll(function () {
                if ($(this).scrollTop() > 1000) {
                    $('#pagetop').fadeIn();
                }
                else {
                    $('#pagetop').fadeOut();
                }
            });
            $('#pagetop').click(function () {
                $('html,body').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
        });
    </script>
</head>
<body>
<div class="top">
    <ul class="menu"><!-- liタグがなかったので追加 -->
        <li>
            <a href="#contact" class="btn">
                CONTACT
            </a>
        </li>
        <li>
            <a href="#music" class="btn">
                MUSIC
            </a>
        </li>
        <li>
            <a href="#graphics" class="btn">
                GRAPHICS
            </a>
        </li>
        <li>
            <a href="#profile" class="btn">
                PROFILE
            </a>
        </li>
    </ul>
    <p>
        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/rogo.png">
    </p>
</div>
<header>
    <section class="icon"></section>
    <section class="profile">
        <h2 id="profile">PROFILE</h2>
        <div class="photo-show">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro1.jpg">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro2.jpg">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro3.jpg">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/pro4.jpg">
        </div>
        <div class="text">
            <p>自転車に乗ったり音楽やったりデザインをしています。</p>
        </div>
    </section>

    <section class="gra">
        <h2 id="graphics">GRAPHICS</h2>
        <div class="container">
            <div class="item">
                <a href="prev1.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra1.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>

            <div class="item">
                <a href="prev2.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra2.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>

            <div class="item">
                <a href="prev3.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra3.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>

        </div>
        <div class="container">
            <div class="item">
                <a href="prev4.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra4.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>

            <div class="item">
                <a href="prev5.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra5.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>

            <div class="item">
                <a href="prev6.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/gra6.jpg">
                </a>
                <p>hello. hello. hello. hello.</p>
            </div>
        </div>
        <!-- </div> 不要なdivタグ -->
    </section>
    <!-- <section class="music"></section> 2つある意味がわからないのでコメントアウト -->
    <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>
            </div>
        </div>
    </section>
    <section class="contact">
        <h2 id="contact">CONTACT</h2>
        <div class="contacttext">
            <p>mail address</p>
        </div>
        <!-- </div> 不要なdivタグ -->
    </section>
</header>
<footer>
    <div class="top">
        <div class="sita">
            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/footer.png">
            <p id="pagetop">
                <a href="index.html">
                    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/rogo.png"
                         height="70"
                         width="70"
                         alt="ページトップボタン">
                </a>
            </p>
        </div>
    </div>
</footer>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/19 18:00

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

    キャンセル

  • 2017/08/19 18:02

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

    キャンセル

  • 2017/08/19 18:06

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

    キャンセル

  • 2017/08/19 18:10

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

    キャンセル

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/19 05:25

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

    キャンセル

  • 2017/08/19 13:21

    確かに!おっしゃる通りですね。
    追記のCSSの部分見逃しておりました。

    指摘ありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML5

    4307questions

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