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

下記サイトを参考に全画面スクロールの演出を実装したいと考えています。
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

Lhankor_Mhy

2021/12/08 06:24

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

行動規範の内容に同意します

回答1件

ベストアンサー

// スムーススクロール
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.hash を const targetId = e.currentTarget.hash にするといかがでしょうか。

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

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

投稿2021/12/08 12:32