以下のコードで検証しましたが、状況が再現しませんでした。一度以下のコードを実行してみていただけませんか?
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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。