カスタムデータ属性を使用したスムーススクロール

仕事でスクロールを使用し、グローバルのものが影響して正常に機能しなかったのでカスタムデータ属性を使用して対応しました。

html**


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>カスタムデータ属性を使用したスムーススクロール</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
    	
    $(function () {
      var headerHight = 50; //ヘッダの高さ
      $('a[data-area]').click(function(){
          var href= '#' + $(this).attr("data-area");
            var target = $(href == "#" || href == "" ? 'html' : href);
            console.log(target);
             var position = target.offset().top - headerHight; //ヘッダの高さ分位置をずらす
          $("html, body").animate({scrollTop:position}, 550, "swing");
             return false;
        });
     });

});
</script>

</head>
<body>
    
    <ul class="navi__list dfc">
      <li><a data-area="area01"><img src="img/navi01.jpg" alt=""></a></li>
      <li><a data-area="area02"><img src="img/navi02.jpg" alt=""></a></li>
      <li><a data-area="area03"><img src="img/navi03.jpg" alt=""></a></li>
    </ul>

    <div id="area01"></div>

</body>
</html>