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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

HTML

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

Q&A

0回答

2352閲覧

CSS3で実現したスクロールの最終行にアンカーリンクで移動させたい

keiji23

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

HTML

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

0グッド

0クリップ

投稿2016/08/08 11:16

###前提・実現したいこと
layer_boardでレイヤー構造になっているdivレイヤー内のコンテンツに対して、
CSS3で実現したアニメーションで下から上へコンテンツを動かしているが、
スキップボタンを実装して、コンテンツの最終行にアンカーリンクで移動したい

###発生している問題・エラーメッセージ
エラーはないですが、アンカーリンクが動作しない。

エラーメッセージ なし

###該当のソースコード

◯CSSコード html,body { height: 100%; } * html .layer_board_bg, * html .layer_board { position: absolute; } .layer_board_bg { position: fixed; background: url("../images/bg-tagline.jpg") center no-repeat #000; background-size: cover; width: 100%; height: 100%; z-index: 10000; top: 0; left: 0; display: none; cursor: pointer; /* background: #000; */ } .layer_board { color: #fff; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; display: none; padding-bottom: 50px; padding-top: 50px; position: fixed; left: 0; margin: auto; text-align: center; z-index: 10001; width:100%; animation: 120s credits linear; -moz-animation: 120s credits linear; -webkit-animation: 120s credits linear; -o-animation: 120s credits linear; -ms-animation: 120s credits linear; } .layer_board a{ color: #fff; text-decoration: none; } /* .layer_board h1{ font-family: 'YuMincho',"游明朝","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; font-size: 16px; letter-spacing: .25em; padding-bottom: 200px; padding-right: 200px; text-align: right; } */ /* .layer_board h2{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; border-bottom: solid 1px #fff; font-family: 'YuMincho',"游明朝","ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; font-size: 48px; margin: 0 50px; letter-spacing: .25em; text-align: left; } */ .layer_board h1{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; padding-bottom: 30px; padding-left: 50px; padding-right: 50px; width:auto; text-align: left; } .layer_board h1 img{ width:80%; height: auto; } .layer_board h2{ font-size: 14px; padding: 50px 50px 0 50px; text-align: left; } .layer_board p.opencampus{ font-size: 36px; margin: 0; padding: 0 0 0 50px; } .layer_board p.moushikomi{ font-size: 20px; margin: 0; padding: 0 0 0 50px; } .layer_board p.moushikomi span{ font-size: 12px; } .layer_board p{ padding: 10px 50px 20px 50px; font-size: 12px; line-height: 2; text-align: left; } .layer_board p.skip{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; font-size: 18px; font-weight: normal; margin: 20px auto; padding: 10px; text-align: center; border:solid 1px #fff; line-height:40px; height:30px; vertical-align: middle; width:100px; cursor: pointer; } .layer_board p.skip span{ -ms-writing-mode: tb-rl; /* for MS IE8+ */ -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; vertical-align: middle; } .layer_board p.btn_close{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; font-size: 23px; font-weight: normal; margin: 100px auto; padding: 10px; text-align: center; border:solid 1px #fff; line-height:40px; height:40px; width:40px; cursor: pointer; } .layer_board p.copy{ font-size: 16px; padding-bottom: 0; padding-top: 0; } @keyframes credits { 0% { color: #5798e0; top: 100%; opacity: 0; } 25%{ color: #fff; opacity: 1; } 100% { top: -300%; opacity: 0; } } @-moz-keyframes credits { 0% { color: #5798e0; top: 100%; opacity: 0; } 25%{ color: #fff; opacity: 1; } 100% { top: -300%; opacity: 0; } } @-webkit-keyframes credits { 0% { color: #5798e0; top: 100%; opacity: 0; } 25%{ color: #fff; opacity: 1; } 100% { top: -300%; opacity: 0; } } @-o-keyframes credits { 0% { color: #5798e0; top: 100%; opacity: 0; } 25%{ color: #fff; opacity: 1; } 100% { top: -300%; opacity: 0; } } @-ms-keyframes credits { 0% { color: #5798e0; top: 100%; opacity: 0; } 25%{ color: #fff; opacity: 1; } 100% { top: -300%; opacity: 0; } } ◯HTMLコード <html> 略 <link href="common/css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" /> <script src="common/js/import.js"></script> <script src="common/js/jquery.carouFredSel.js"></script> <script src="common/js/jquery.mousewheel.js"></script> <script src="common/js/jquery.jscrollpane.min.js"></script> <script src="common/js/top.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('a.movie-link').fancybox({ autoSize: false, width: '90%', height: '90%' }); }); </script> <script src="sp/js/jquery.Pc2Sp.js"></script> <!--[if lt IE 8]> <script type="text/javascript" src="js/jquery.belatedPNG.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('img[src$=".png"]').fixPng(); $(".pngImg").fixPng(); }); </script> <![endif]--> <!-- 160805tagline --> <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> --> <link href="css/layerBoard.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.cookie.js"></script> <script src="js/jquery.layerBoard.js"></script> <script> $(function(){ $('#layer_board_area').layerBoard({alpha:1}); }) </script> </head> <script type="text/javascript"> $(function(){ $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); </script> <body id="home"> <!-- tagline160805 --> <!-- layer_board --> <section id="layer_board_area"> <div class="layer_board_bg"></div> <div class="layer_board"> <h1><img src="images/tagline@2x.png" alt="企業がつくったものづくり大学"></h1> <p class="skip"><a href="#close" data-ajax="false"><span>></span>SKIP</a></p> <p class="copy">スクロールできるだけの文章は入っています。</p> <p class="btn_close" id="close">×</p> </div> </section> <!-- //layer_board --> 略 </html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/08 11:52

CSSとHTMLは別のコードブロックで扱われたほうが良いと思います。
NatsumiOki

2016/08/09 00:22

ライブラリや自前と思われるjsをたくさん読み込んでいますが、その中で何をしているのかわからないので回答しづらいです。CDNのパスで必要なライブラリを読み込めるようにするか、必要なところだけ抜き出したコードを提示してほしいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問