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

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

ただいまの
回答率

88.34%

ページロード時に一瞬id="service"に遷移してしまいます。

受付中

回答 0

投稿 編集

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

reo_fukkase

score 30

scssはコンパイル済みです
section="service"のidを消すと、この問題はおきませんでした。
scroll-btnのhrefの中身を消しても、この問題はおきませんでした。
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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>
@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;
                }
            }
        }
    }
}
$(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)');
            }
        });
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • 退会済みユーザー

    2020/05/28 02:15

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

まだ回答がついていません

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

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

関連した質問

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