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

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

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

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

HTML5

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

JavaScript

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

Q&A

解決済

1回答

877閲覧

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

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ブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/12/08 04:21

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

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

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <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> 9 </head> 10 <body> 11 <header id="header" class="header"> 12 <h1 class="header_logo"> 13 <a href="#section1"><img src="xxx.png"></a> 14 </h1> 15 </header> 16 <nav id="pagination" class="pagination"> 17 <a id="pagination1" href="#section1"></a> 18 <a id="pagination2" href="#section2"></a> 19 <a id="pagination3" href="#section3"></a> 20 <a id="pagination4" href="#section4"></a> 21 <a id="pagination5" href="#section5"></a> 22 </nav> 23 <div class="fullPageScroll"> 24 <section id="section1" class="section section1"></section> 25 <section id="section2" class="section section2"></section> 26 <section id="section3" class="section section3"></section> 27 <section id="section4" class="section section4"></section> 28 <section id="section5" class="section section5"></section> 29 </div> 30 <footer id="footer" class="footer"></footer> 31 <script> 32 // スムーススクロール 33 const internalLinks = document.querySelectorAll('a[href^="#"]'); 34 internalLinks.forEach((internalLink) => { 35 internalLink.addEventListener("click", (e) => { 36 e.preventDefault(); 37 const targetId = e.target.hash; 38 const target = document.querySelector(targetId); 39 target.scrollIntoView({ behavior: "smooth" }); 40 }); 41 }); 42 43 // Intersection Observer 44 const sections = document.querySelectorAll(".section"); 45 const observerRoot = document.querySelector(".fullPageScroll"); 46 const options = { 47 root: observerRoot, 48 rootMargin: "-50% 0px", 49 threshold: 0, 50 }; 51 const observer = new IntersectionObserver(doWhenIntersect, options); 52 sections.forEach((section) => { 53 observer.observe(section); 54 }); 55 56 /** 57 * 交差したときに呼び出す関数 58 * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。 59 */ 60 function doWhenIntersect(entries) { 61 entries.forEach((entry) => { 62 if (entry.isIntersecting) { 63 activatePagination(entry.target); 64 } 65 }); 66 } 67 68 /** 69 * ページネーションの大きさを変える関数 70 * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。 71 */ 72 function activatePagination(element) { 73 const currentActiveIndex = document.querySelector( 74 "#pagination .active" 75 ); 76 if (currentActiveIndex !== null) { 77 currentActiveIndex.classList.remove("active"); 78 } 79 const newActiveIndex = document.querySelector( 80 `.pagination a[href='#${element.id}']` 81 ); 82 newActiveIndex.classList.add("active"); 83 } 84 </script> 85 </body> 86</html> 87

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

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

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

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

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

Lhankor_Mhy

2021/12/08 06:24

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

回答1

0

ベストアンサー

// スムーススクロール 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" }); }); });

この中の const targetId = e.target.hashconst targetId = e.currentTarget.hash にするといかがでしょうか。

この場合、 e.target ですと img 要素がイベントターゲットになっていると思われます。

参考
https://ja.javascript.info/bubbling-and-capturing

投稿2021/12/08 12:32

machine_machine

総合スコア162

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問