ChatGPTでWeb制作はどう変わる！？

$('a[href^="#"]').on('click', function() {

  var header = $('header').innerHeight();
  var id = $(this).attr('href');
  var position = 0;
  if ( id != '#') {
    position = $(id).offset().top - header;
  }
  console.log(id);
  $('html,body').animate( {
    scrollTop: position 
  },
  300);
return false;
});

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const header = document.querySelector('header').offsetHeight;
    const id = this.getAttribute('href');
    let position = 0;

    if (id !== '#') {
      position = document.querySelector(id).offsetTop - header;
    }

    console.log(id);

    window.scrollTo({
      top: position,
      behavior: 'smooth'
    });
  });
});

<template>
  <div>
    <a href="#section1" @click="scrollToSection('#section1')">Section 1</a>
    <a href="#section2" @click="scrollToSection('#section2')">Section 2</a>
    <a href="#section3" @click="scrollToSection('#section3')">Section 3</a>

    <section id="section1">Section 1 Content</section>
    <section id="section2">Section 2 Content</section>
    <section id="section3">Section 3 Content</section>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToSection(id) {
      const header = document.querySelector('header').offsetHeight;
      const position = document.querySelector(id).offsetTop - header;
      window.scrollTo({
        top: position,
        behavior: 'smooth'
      });
    }
  }
};
</script>