ページ内スクロールに「少し上にもどる」挙動の実装方法

ページ内のいわゆる「スムーススクロール」の実装はできましたが、
リンク先のサイトにある、「この記事の目次」をクリックすると、
行き過ぎた分だけ少しもどる挙動の実装が分かりません。

できれば、jqueryを読み込まず実装できれば良いのですが、
jqueryでも構いません。アドバイス等、教えて頂けないでしょうか？

よろしくお願い致します。

https://www.sejuku.net/blog/23639

javascript
1const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
2  for (let i = 0; i < smoothScrollTrigger.length; i++){
3    smoothScrollTrigger[i].addEventListener('click', (e) => {
4      e.preventDefault();
5      let href = smoothScrollTrigger[i].getAttribute('href');
6      let targetElement = document.getElementById(href.replace('#', ''));
7      const rect = targetElement.getBoundingClientRect().top;
8      const offset = window.pageYOffset;
9      const gap = 0;
10      const target = rect + offset - gap;
11      window.scrollTo({
12        top: target,
13        behavior: 'smooth',
14      });
15    });
16}

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

回答1件

ベストアンサー

例えばこんなやり方があります。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        #div1,
10        #div2,
11        #div3 {
12            width: 100%;
13            height: 100vh;
14        }
15
16        #div2 {
17            background-color: black
18        }
19
20        #div3 {
21            background-color: red;
22        }
23    </style>
24</head>
25
26<body>
27    <div id="div1">
28        <button>スクロール</button>
29    </div>
30    <div id="div2"></div>
31    <div id="div3"></div>
32    <script>
33        const btn = document.getElementsByTagName("button")[0];
34        const div2 = document.getElementById("div2");
35
36        btn.addEventListener("click", () => {
37            const scrollPoint1 = div2.getBoundingClientRect().top + 300;
38            const scrollPoint2 = div2.getBoundingClientRect().top;
39            scrollTo({
40                top: scrollPoint1,
41                behavior: 'smooth',
42            });
43            setTimeout(() => {
44                scrollTo({
45                    top: scrollPoint2,
46                    behavior: 'smooth',
47                });
48            }, 1000);
49
50        });
51    </script>
52</body>
53
54</html>