Q&A
scssはコンパイル済みです
section="service"のidを消すと、この問題はおきませんでした。
scroll-btnのhrefの中身を消しても、この問題はおきませんでした。
よろしくお願いします。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link rel="stylesheet" href="portfolio.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 9</head> 10<body> 11 <div class="page-top" id="back-to-top"> 12 <i class="fas fa-chevron-up page-top-icon"></i> 13 </div> 14 <i class="fas fa-bars menu-bar"></i> 15 <section class="top"> 16 <div class="ttl" id="ttl"> 17 <h1>テスト</h1> 18 <h2>Welcome to My Portfolio</h2> 19 </div> 20 <a href="#service" class="scroll-btn" id="scroll-btn"> 21 <span></span> 22 Scroll 23 </a> 24 </section> 25 <section class="service" id="service"> 26 <h1>Service</h1> 27 <p class="ttl-txt">テスト</p> 28 <div class="row"> 29 <div class="service-card col-lg-4 col-xs-11"> 30 <h1>テスト</h1> 31 <i class="fas fa-laptop"></i> 32 <p >テスト</p> 33 </div> 34 <div class="service-card col-lg-4 col-xs-11"> 35 <h1>テスト</h1> 36 <i class="fas fa-mobile-alt"></i> 37 <p>テスト</p> 38 </div> 39 <div class="service-card col-lg-4 col-xs-12"> 40 <h1>テスト</h1> 41 <i class="fas fa-cogs"></i> 42 <p>テスト</p> 43 </div> 44 </div> 45 </section> 46 <script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script> 47</body> 48</html>
scss
1@charset "utf-8"; 2body{ 3 .page-top{ 4 width:70px; 5 height:70px; 6 cursor: pointer; 7 position: fixed; 8 bottom: 90px; 9 right:50px; 10 background-color:#E4E4E4; 11 z-index: 1000; 12 .page-top-icon{ 13 font-size: 34px; 14 margin:16px 0 0 21px; 15 color:#57625B; 16 } 17 } 18 .top{ 19 height:100vh; 20 background-image: url("image/S__15196194.jpg"); 21 background-size: cover; 22 background-position: center center; 23 overflow: hidden; 24 border-bottom: solid 1px rgba(112,121,112,0.5); 25 font-family: "Times"; 26 display: flex; 27 position: relative; 28 justify-content: center; 29 .ttl{ 30 text-align: center; 31 color:#E4E4E4; 32 opacity: 0.8; 33 font-weight: 100; 34 align-self:center; 35 width:60%; 36 h1{ 37 font-size: 80px; 38 font-weight: 200; 39 } 40 } 41 .scroll-btn{ 42 font-size: 24px; 43 width:54px; 44 height: 29px; 45 position: absolute; 46 bottom: 50px; 47 color:#57625B; 48 text-decoration: none; 49 -webkit-transform: translate(0, -50%); 50 transform: translate(0, -50%); 51 span{ 52 position: absolute; 53 top:-60px; 54 left:20px; 55 width: 60px; 56 height: 60px; 57 margin-left: -23px; 58 border: 1px solid #57625B; 59 border-radius: 100%; 60 box-sizing: border-box; 61 &:after{ 62 position: absolute; 63 top: 50%; 64 left: 50%; 65 content: ''; 66 width: 16px; 67 height: 16px; 68 margin: -12px 0 0 -8px; 69 border-left: 1px solid #57625B; 70 border-bottom: 1px solid #57625B; 71 -webkit-transform: rotate(-45deg); 72 transform: rotate(-45deg); 73 box-sizing: border-box; 74 } 75 &:before{ 76 position: absolute; 77 top: 8.2px; 78 left: 8px; 79 z-index: -1; 80 content: ''; 81 width: 44px; 82 height: 44px; 83 box-shadow: 0 0 0 0 rgba(255,255,255,.1); 84 border-radius: 100%; 85 opacity: 0; 86 -webkit-animation: sdb 3s infinite; 87 animation: sdb 3s infinite; 88 box-sizing: border-box; 89 } 90 } 91 } 92 } 93 @-webkit-keyframes sdb { 94 0% { 95 opacity: 0; 96 } 97 30% { 98 opacity: 1; 99 } 100 60% { 101 box-shadow: 0 0 0 60px rgba(255,255,255,.6); 102 opacity: 0; 103 } 104 100% { 105 opacity: 0; 106 } 107} 108@keyframes sdb { 109 0% { 110 opacity: 0; 111 } 112 30% { 113 opacity: 1; 114 } 115 60% { 116 box-shadow: 0 0 0 60px rgba(255,255,255,.6); 117 opacity: 0; 118 } 119 100% { 120 opacity: 0; 121 } 122} 123 .service{ 124 height:auto; 125 background-color: #fff; 126 font-family: "Times"; 127 overflow: hidden; 128 color:#333; 129 opacity:0.7; 130 padding-bottom: 80px; 131 position: relative; 132 h1{ 133 text-align: center; 134 width:56%; 135 margin-right: auto; 136 margin-left: auto; 137 padding:15px 0 15px 0; 138 margin-top: 60px; 139 font-size: 50px; 140 border-bottom: solid 2px rgba(51,51,51,0.4); 141 } 142 .ttl-txt{ 143 text-align: center; 144 font-size: 22px; 145 width:60%; 146 margin: 100px auto 0 auto; 147 } 148 .row{ 149 .service-card{ 150 opacity : 0; 151 transform: translateY(60px); 152 transition: all 1s; 153 h1{ 154 font-size: 26px; 155 border-bottom: none; 156 margin-top: 100px; 157 margin-bottom: 40px; 158 } 159 i{ 160 font-size: 50px; 161 display: flex; 162 align-items: center; 163 justify-content: center; 164 } 165 p{ 166 font-size: 18px; 167 margin-top: 40px; 168 text-align: center; 169 } 170 } 171 } 172 } 173}
jquery
1$(function(){ 2 /*トップ*/ 3 $(window).scroll(function(){ 4 if($(this).scrollTop()>34){ 5 $("#ttl").fadeOut(400); 6 } 7 else{ 8 $("#ttl").fadeIn(400); 9 } 10 }); 11 $(window).scroll(function(){ 12 if($(this).scrollTop()>360){ 13 $("#header").slideDown(400); 14 } 15 else{ 16 $("#header").slideUp(400); 17 } 18 }); 19 var headerheight=60; 20 /*メニュー*/ 21 $('#service-jump').click(function() { 22 var id=$(this).attr('href'); 23 var position=$(id).offset().top-headerheight; 24 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 25 }); 26 $('#about-jump').click(function() { 27 var id=$(this).attr('href'); 28 var position=$(id).offset().top-headerheight; 29 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 30 }); 31 $('#works-jump').click(function() { 32 var id=$(this).attr('href'); 33 var position=$(id).offset().top-headerheight; 34 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 35 }); 36 $('#contact-jump').click(function() { 37 var id=$(this).attr('href'); 38 var position=$(id).offset().top-headerheight; 39 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 40 }); 41 /*スクロールボタン*/ 42 $('#scroll-btn').click(function() { 43 var id=$(this).attr('href'); 44 var position=$(id).offset().top-headerheight+100; 45 $('html,body').animate({'scrollTop':position},800);/* Act on the event */ 46 }); 47 $(window).scroll(function(){ 48 if($(this).scrollTop()>34){ 49 $("#scroll-btn").fadeOut(400); 50 } 51 else{ 52 $("#scroll-btn").fadeIn(400); 53 } 54 }); 55 /*レスポンシブメニュー*/ 56 $(window).scroll(function(){ 57 if($(this).scrollTop()>34){ 58 $(".menu-bar").fadeIn(400); 59 } 60 else{ 61 $(".menu-bar").fadeOut(400); 62 } 63 }); 64 $(".menu-bar").click(function(){ 65 if($(this).hasClass('open')){ 66 $(this).removeClass('open'); 67 $(".menu-bar").css('color','#57625B'); 68 $("#menu-res").slideUp(300); 69 }else{ 70 $(this).addClass('open'); 71 $(".menu-bar").css('color','#E4E4E4'); 72 $("#menu-res").slideDown(300); 73 } 74 }); 75 $('#service-jump-res').click(function() { 76 var id=$(this).attr('href'); 77 var position=$(id).offset().top-headerheight; 78 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 79 }); 80 $('#about-jump-res').click(function() { 81 var id=$(this).attr('href'); 82 var position=$(id).offset().top-headerheight; 83 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 84 }); 85 $('#works-jump-res').click(function() { 86 var id=$(this).attr('href'); 87 var position=$(id).offset().top-headerheight; 88 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 89 }); 90 $('#contact-jump-res').click(function() { 91 var id=$(this).attr('href'); 92 var position=$(id).offset().top-headerheight; 93 $('html,body').animate({'scrollTop':position},500);/* Act on the event */ 94 }); 95 /*サービス*/ 96 $(window).scroll(function (){ 97 $('.service-card').each(function(){ 98 var targetElement = $(this).offset().top; 99 var scroll = $(window).scrollTop(); 100 var windowHeight = $(window).height(); 101 if (scroll > targetElement - windowHeight + 320){ 102 $(this).css('opacity','1'); 103 $(this).css('transform','translateY(0)'); 104 } 105 }); 106 }); 107 /*アバウト*/ 108 $(window).scroll(function(){ 109 $(".about-fadein-l").each(function(){ 110 var targetElement = $(this).offset().top; 111 var scroll = $(window).scrollTop(); 112 var windowHeight = $(window).height(); 113 if(scroll>targetElement-windowHeight+400){ 114 $(this).css('opacity','1'); 115 $(this).css('transform','translateX(0)'); 116 } 117 }); 118 }); 119 $(window).scroll(function(){ 120 $(".about-fadein-r").each(function(){ 121 var targetElement = $(this).offset().top; 122 var scroll = $(window).scrollTop(); 123 var windowHeight = $(window).height(); 124 if(scroll>targetElement-windowHeight+400){ 125 $(this).css('opacity','1'); 126 $(this).css('transform','translateX(0)'); 127 } 128 }); 129 }); 130 /*トップへ戻る*/ 131 $('#back-to-top').hide(); 132 $(window).scroll(function(){ 133 if ($(this).scrollTop()>75) { 134 $('#back-to-top').fadeIn(300); 135 }else{ 136 $('#back-to-top').fadeOut(300); 137 } 138 }); 139 $('#back-to-top').click(function(){ 140 $('html,body').animate({ 141 'scrollTop':0 142 },500); 143 }); 144 /*ワーク*/ 145 $('.work').hover(function() { 146 $(this).css('transform','translateY(-30px)') 147 }, function() { 148 $(this).css('transform','translateY(0)') 149 }); 150 $(window).scroll(function(){ 151 $(".work").each(function(i){ 152 var targetElement = $(this).offset().top; 153 var scroll = $(window).scrollTop(); 154 var windowHeight = $(window).height(); 155 if(scroll>targetElement-windowHeight+250){ 156 $(this).delay(300*i).css('opacity','1'); 157 $(this).delay(300*i).css('transform','translateY(0)'); 158 } 159 }); 160 }); 161});
あなたの回答
tips
プレビュー
