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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

aタグ内に画像を置くとスムーススクロールが効かない

6xygen
6xygen

総合スコア11

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

317閲覧

投稿2021/12/08 04:21

下記サイトを参考に全画面スクロールの演出を実装したいと考えています。
https://ics.media/entry/191211/

画面左上に固定ヘッダとしてロゴを配置したいのですが、
aタグ内にimgタグで画像を置くと、スムーススクロールが機能せず困っています。
どのように改善すればすれば良いかご教示いただきたいです。
よろしくお願いします。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}ul{list-style:none;padding:0;margin:0}ol{padding:0;margin:0}em{font-style:normal}figure,h1,h2,h3,h4,h5,h6,p,dl,dt,dd{margin:0}img{width:100%;vertical-align:middle}a{text-decoration:none}button{padding:0;border:none;outline:none;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}html{font-size:16px}body{line-height:1.75;font-family:"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic","メイリオ","Meiryo",sans-serif;font-size:1rem;-webkit-font-smoothing:antialiased}.header{position:fixed;background-color:transparent;top:0;left:0;line-height:1}.header .header_logo{position:absolute;top:50px;left:40px}.header .header_logo img{fill:#252525}.header .header_logo a{display:block;width:103px;height:33px;background-color:#252525}.pagination{position:fixed;top:50%;right:32px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pagination a{display:block;width:12px;height:12px;margin:24px 0;border-radius:50%;background-color:#252525;-webkit-transition-property:-webkit-transform background-color;transition-property:-webkit-transform background-color;transition-property:transform background-color;transition-property:transform background-color, -webkit-transform background-color;-webkit-transition-duration:.4s;transition-duration:.4s;-webkit-filter:drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.6));filter:drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.6))}.pagination a.active{-webkit-transform:scale(1.8);transform:scale(1.8)}.pagination a:not(.active):hover{background-color:#ddd}.fullPageScroll{width:100%;height:100vh;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-y:auto;-webkit-overflow-scrolling:touch}.section{width:100%;height:100vh;padding:10%;scroll-snap-align:start}.section1{background-color:#ffba49}.section2{background-color:#212124}.section3{background-color:#ef5b5b}.section4{background-color:#a4a9ad}.section5{background-color:#20a39e}</style> </head> <body> <header id="header" class="header"> <h1 class="header_logo"> <a href="#section1"><img src="xxx.png"></a> </h1> </header> <nav id="pagination" class="pagination"> <a id="pagination1" href="#section1"></a> <a id="pagination2" href="#section2"></a> <a id="pagination3" href="#section3"></a> <a id="pagination4" href="#section4"></a> <a id="pagination5" href="#section5"></a> </nav> <div class="fullPageScroll"> <section id="section1" class="section section1"></section> <section id="section2" class="section section2"></section> <section id="section3" class="section section3"></section> <section id="section4" class="section section4"></section> <section id="section5" class="section section5"></section> </div> <footer id="footer" class="footer"></footer> <script> // スムーススクロール const internalLinks = document.querySelectorAll('a[href^="#"]'); internalLinks.forEach((internalLink) => { internalLink.addEventListener("click", (e) => { e.preventDefault(); const targetId = e.target.hash; const target = document.querySelector(targetId); target.scrollIntoView({ behavior: "smooth" }); }); }); // Intersection Observer const sections = document.querySelectorAll(".section"); const observerRoot = document.querySelector(".fullPageScroll"); const options = { root: observerRoot, rootMargin: "-50% 0px", threshold: 0, }; const observer = new IntersectionObserver(doWhenIntersect, options); sections.forEach((section) => { observer.observe(section); }); /** * 交差したときに呼び出す関数 * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。 */ function doWhenIntersect(entries) { entries.forEach((entry) => { if (entry.isIntersecting) { activatePagination(entry.target); } }); } /** * ページネーションの大きさを変える関数 * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。 */ function activatePagination(element) { const currentActiveIndex = document.querySelector( "#pagination .active" ); if (currentActiveIndex !== null) { currentActiveIndex.classList.remove("active"); } const newActiveIndex = document.querySelector( `.pagination a[href='#${element.id}']` ); newActiveIndex.classList.add("active"); } </script> </body> </html>

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy

2021/12/08 06:24

ご提示のコードをそのまま試してみましたが、スムーススクロールがされました。 つまり、問題が再現しませんでした。 ご提示のコードに問題の原因がなくご提示いただいていない部分に原因があるか、問題の共有が上手くいっていないか、のどちらかかと思います。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。