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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQuery

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

HTML

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

CSS

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

受付中

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

reo_fukkase
reo_fukkase

総合スコア0

jQuery

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

HTML

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

CSS

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

0回答

-2評価

0クリップ

6閲覧

投稿2020/05/02 06:11

編集2022/01/12 10:55

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

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)'); } }); }); });

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

jQuery

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

HTML

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

CSS

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