質問編集履歴

1 文の追加

reo_fukkase

reo_fukkase score 30

2020/05/02 15:26  投稿
ページロード時に一瞬id="service"に遷移してしまいます。
scssはコンパイル済みです
section="service"のidを消すと、この問題はおきませんでした。
scroll-btnのhrefの中身を消しても、この問題はおきませんでした。  
よろしくお願いします。
```html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>  
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="portfolio.css">
   <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
   <div class="page-top" id="back-to-top">
       <i class="fas fa-chevron-up page-top-icon"></i>
   </div>
   <i class="fas fa-bars menu-bar"></i>
   <section class="top">
       <div class="ttl" id="ttl">
           <h1>テスト</h1>
           <h2>Welcome to My Portfolio</h2>
       </div>
       <a href="#service" class="scroll-btn" id="scroll-btn">
           <span></span>
           Scroll
       </a>
   </section>
   <section class="service" id="service">
       <h1>Service</h1>
       <p class="ttl-txt">テスト</p>
       <div class="row">
           <div class="service-card col-lg-4 col-xs-11">
               <h1>テスト</h1>
               <i class="fas fa-laptop"></i>
               <p >テスト</p>
           </div>
           <div class="service-card col-lg-4 col-xs-11">
               <h1>テスト</h1>
               <i class="fas fa-mobile-alt"></i>
               <p>テスト</p>   
           </div>
           <div class="service-card col-lg-4 col-xs-12">
               <h1>テスト</h1>
               <i class="fas fa-cogs"></i>
               <p>テスト</p>
           </div>
       </div>
   </section>
   <script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script>
</body>
</html>
```
```scss
@charset "utf-8";
body{
   .page-top{
       width:70px;
       height:70px;
       cursor: pointer;
       position: fixed;
       bottom: 90px;
       right:50px;
       background-color:#E4E4E4;
       z-index: 1000;
       .page-top-icon{
           font-size: 34px;
           margin:16px 0 0 21px;
           color:#57625B;
       }
   }
   .top{
       height:100vh;
       background-image: url("image/S__15196194.jpg");
       background-size: cover;
       background-position: center center;
       overflow: hidden;
       border-bottom: solid 1px rgba(112,121,112,0.5);
       font-family: "Times";
       display: flex;
       position: relative;
       justify-content: center;
       .ttl{
           text-align: center;
           color:#E4E4E4;
           opacity: 0.8;
           font-weight: 100;
           align-self:center;
           width:60%;
           h1{
               font-size: 80px;
               font-weight: 200;
           }
       }
       .scroll-btn{
           font-size: 24px;
           width:54px;
           height: 29px;
           position: absolute;
           bottom: 50px;
           color:#57625B;
           text-decoration: none;
           -webkit-transform: translate(0, -50%);
             transform: translate(0, -50%);
             span{
                 position: absolute;
               top:-60px;
               left:20px;
               width: 60px;
               height: 60px;
               margin-left: -23px;
               border: 1px solid #57625B;
               border-radius: 100%;
               box-sizing: border-box;
               &:after{
                   position: absolute;
                   top: 50%;
                   left: 50%;
                   content: '';
                   width: 16px;
                   height: 16px;
                   margin: -12px 0 0 -8px;
                   border-left: 1px solid #57625B;
                   border-bottom: 1px solid #57625B;
                   -webkit-transform: rotate(-45deg);
                   transform: rotate(-45deg);
                   box-sizing: border-box;
               }
               &:before{
                   position: absolute;
                   top: 8.2px;
                   left: 8px;
                   z-index: -1;
                   content: '';
                   width: 44px;
                   height: 44px;
                   box-shadow: 0 0 0 0 rgba(255,255,255,.1);
                   border-radius: 100%;
                   opacity: 0;
                   -webkit-animation: sdb 3s infinite;
                   animation: sdb 3s infinite;
                   box-sizing: border-box;
               }
             }
       }
   }
   @-webkit-keyframes sdb {
 0% {
   opacity: 0;
 }
 30% {
   opacity: 1;
 }
 60% {
   box-shadow: 0 0 0 60px rgba(255,255,255,.6);
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}
@keyframes sdb {
 0% {
   opacity: 0;
 }
 30% {
   opacity: 1;
 }
 60% {
   box-shadow: 0 0 0 60px rgba(255,255,255,.6);
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}
   .service{
       height:auto;
       background-color: #fff;
       font-family: "Times";
       overflow: hidden;
       color:#333;
       opacity:0.7;
       padding-bottom: 80px;
       position: relative;
       h1{
           text-align: center;
           width:56%;
           margin-right: auto;
           margin-left: auto;
           padding:15px 0 15px 0;
           margin-top: 60px;
           font-size: 50px;
           border-bottom: solid 2px rgba(51,51,51,0.4);
       }
       .ttl-txt{
           text-align: center;
           font-size: 22px;
           width:60%;
           margin: 100px auto 0 auto;
       }
       .row{
           .service-card{
               opacity : 0;
                 transform: translateY(60px);
                 transition: all 1s;
               h1{
                   font-size: 26px;
                   border-bottom: none;
                   margin-top: 100px;
                   margin-bottom: 40px;
               }
               i{
                   font-size: 50px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
               }
               p{
                   font-size: 18px;
                   margin-top: 40px;
                   text-align: center;
               }
           }
       }
   }
}
```
```jquery
$(function(){
   /*トップ*/
   $(window).scroll(function(){
       if($(this).scrollTop()>34){
           $("#ttl").fadeOut(400);
       }
       else{
           $("#ttl").fadeIn(400);
       }
   });
   $(window).scroll(function(){
       if($(this).scrollTop()>360){
           $("#header").slideDown(400);
       }
       else{
           $("#header").slideUp(400);
       }
   });
   var headerheight=60;
   /*メニュー*/
   $('#service-jump').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#about-jump').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#works-jump').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#contact-jump').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   /*スクロールボタン*/
   $('#scroll-btn').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight+100;
       $('html,body').animate({'scrollTop':position},800);/* Act on the event */
   });
   $(window).scroll(function(){
       if($(this).scrollTop()>34){
           $("#scroll-btn").fadeOut(400);
       }
       else{
           $("#scroll-btn").fadeIn(400);
       }
   });
   /*レスポンシブメニュー*/
   $(window).scroll(function(){
       if($(this).scrollTop()>34){
           $(".menu-bar").fadeIn(400);
       }
       else{
           $(".menu-bar").fadeOut(400);
       }
   });
   $(".menu-bar").click(function(){
       if($(this).hasClass('open')){
           $(this).removeClass('open');
           $(".menu-bar").css('color','#57625B');
           $("#menu-res").slideUp(300);
       }else{
           $(this).addClass('open');
           $(".menu-bar").css('color','#E4E4E4');
           $("#menu-res").slideDown(300);
       }
   });
   $('#service-jump-res').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#about-jump-res').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#works-jump-res').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   $('#contact-jump-res').click(function() {
       var id=$(this).attr('href');
       var position=$(id).offset().top-headerheight;
       $('html,body').animate({'scrollTop':position},500);/* Act on the event */
   });
   /*サービス*/
   $(window).scroll(function (){
       $('.service-card').each(function(){
           var targetElement = $(this).offset().top;
           var scroll = $(window).scrollTop();
           var windowHeight = $(window).height();
           if (scroll > targetElement - windowHeight + 320){
               $(this).css('opacity','1');
               $(this).css('transform','translateY(0)');
           }
       });
   });
   /*アバウト*/
   $(window).scroll(function(){
       $(".about-fadein-l").each(function(){
           var targetElement = $(this).offset().top;
           var scroll = $(window).scrollTop();
           var windowHeight = $(window).height();
           if(scroll>targetElement-windowHeight+400){
               $(this).css('opacity','1');
               $(this).css('transform','translateX(0)');
           }
       });
   });
   $(window).scroll(function(){
       $(".about-fadein-r").each(function(){
           var targetElement = $(this).offset().top;
           var scroll = $(window).scrollTop();
           var windowHeight = $(window).height();
           if(scroll>targetElement-windowHeight+400){
               $(this).css('opacity','1');
               $(this).css('transform','translateX(0)');
           }
       });
   });
   /*トップへ戻る*/
   $('#back-to-top').hide();
   $(window).scroll(function(){
       if ($(this).scrollTop()>75) {
           $('#back-to-top').fadeIn(300);
       }else{
           $('#back-to-top').fadeOut(300);
       }
   });
   $('#back-to-top').click(function(){
       $('html,body').animate({
           'scrollTop':0
       },500);
   });
   /*ワーク*/
   $('.work').hover(function() {
       $(this).css('transform','translateY(-30px)')
   }, function() {
       $(this).css('transform','translateY(0)')
   });
   $(window).scroll(function(){
       $(".work").each(function(i){
           var targetElement = $(this).offset().top;
           var scroll = $(window).scrollTop();
           var windowHeight = $(window).height();
           if(scroll>targetElement-windowHeight+250){
               $(this).delay(300*i).css('opacity','1');
               $(this).delay(300*i).css('transform','translateY(0)');
           }
       });
   });
});
```
  • HTML

    21563 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    15217 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    12431 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る