クリックした要素の場所まで画面スクロールさせる実装について

## はじめに
画面スクロールの処理について、備忘録として残しておきます。
<br>

| 環境| | 
|:--:|:--:|
| OS       | Windows10 22H2 |
| エディター | Visual Studio Code|

## やりたいこと
編集ボタンを押下し、修正が完了した後、
一覧画面で先ほど押下した編集ボタンの位置まで画面をスクロールさせたい。


①編集ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2869221/110f6190-e9f8-410d-3896-f3c2d87e170a.png)

②編集画面にページ遷移するので、修正して修正ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2869221/db864da6-2391-a254-1aed-5d77d27d668a.png)

③一覧画面に戻るときに、先ほど編集したやることの場所まで画面をスクロールさせたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2869221/eda8e4c3-506b-254d-7fc8-dcab0c5542d2.png)



## 実装方法



やること修正画面のmodify.ejsでは、GETメソッドにしており、
欲しいtask_idの情報をURLにつけて、URLからtask_idの値を取得します。
```javaScript:modify.ejs
<form action="/modify/task" method="get">
    <input type="hidden" name="modify_taskid" value="<%= default_taskid %>" />
    <input required type="text" name="modify_task" value="<%= default_task %>" />
    <input required type="date" name="modify_date" value="<%= default_date %>" />
    <input required type="time" name="modify_time" value="<%= default_time %>" />
    <input type="submit" value="修正" />
</form>
```
データベースを更新後、画面側へresultsを渡します。
```javascript:modify.js
router.get('/task', function (req, res, next) {
    const modify_taskid = req.query.modify_taskid;
    const modify_task = req.query.modify_task;
    const modify_date = req.query.modify_date;
    const modify_time = req.query.modify_time;
  
    // やることアップデート
    knex("tasks")
      .where({ "id": modify_taskid })
      .update({ content: modify_task, date: modify_date, time: modify_time })
      .then(function () {
          // やること一覧用のデータを取得
          knex("tasks")
            .where({ "user_id": userId })
            .select("*")
            .orderBy('date', 'asc')
            .orderBy('time', 'asc')
            .then(function (results) {
              // 取得したデータを画面側へ
              res.render('index', {
                results: results,
              });
            })
      })
      .catch(function (err) {
        console.error(err);
        res.render('index', {
        });
      });
  });
```
やること一覧の編集ボタンには``id="button_<%= result.id %>``で一意のidにしています。
```javaScript:index.ejs
<form action="/modify" method="GET" id="button_<%= result.id %>">
    <input type="hidden" name="default_taskid" value="<%= result.id %>" />
    <input type="hidden" name="default_task" value="<%= result.content %>" />
    <input type="hidden" name="default_date" value="<%= result.date %>" />
    <input type="hidden" name="default_time" value="<%= result.time %>" />
    <input class="btn btn-primary" type="submit" value="編集" />
</form>
```
下記のコードでURLからtask_idを取得し、やることの編集ボタンの位置まで画面スクロールさせます。
```javaScript:index.ejs
<script>
    window.addEventListener('load', loadFinished);
    function loadFinished() {
        // URL取得
        const g_url = window.location.search;
        var queryObject = new Object();
        if (g_url) {
            var parameters = queryString.split('&');
            var element = parameters[0].split('=');
            // task_idを取得
            var get_taskid = decodeURIComponent(element[1]);
        }

        const id_button = "button_" + get_taskid
        const buttonLeft = document.getElementById(id_button).getBoundingClientRect().left;
        const buttonTop = document.getElementById(id_button).getBoundingClientRect().top;
        window.scrollTo({
            left: buttonLeft,
            top: buttonTop,
            behavior: 'smooth'
        });
    };
</script>
```
## 最後に
ごく普通の画面のスクロールですが、値の受け渡しの方法などが完璧に理解できておらず、
かなり苦戦したため備忘録として残しておきます。

## 参考文献
この記事は以下の情報を参考にさせていただきました。

- [HTMLの指定した要素の位置に移動する方法3選！](https://masa-enjoy.com/html-scroll-element)
- [Node.jsによるWebアプリケーション作成入門](https://zenn.dev/wkb/books/node-tutorial)