a[href^=”#section_”]をクリックしたら#section_までスムースにスクロールして移動するJavaScript(TypeScriptバージョン)

作成日: 2024年08月05日

JavaScript

function smoothScroll() {

 // a href="#section_***"のものを取得する
 const anchors: NodeListOf<HTMLElement> | null = document.querySelectorAll('a[href^="#section_"]');
 const header: HTMLElement | null = document.querySelector('header');


 if (anchors === null || header === null) return;
  // ヘッダーの高さ
  const headerHeight: number = header.offsetHeight;

  anchors.forEach((anchor): void => {
    anchor.addEventListener('click', (e: MouseEvent): void => {
        e.preventDefault();

        const href: string | null = anchor.getAttribute('href');
        
        if (href === null) return;
        
        // id="section_***"を取得する
        const target: HTMLElement | null = document.getElementById(href.replace('#', ''));
        
        if (target === null) return;
        
        // id="section_***"の画面左上からの距離
        const targetPos: number = target.getBoundingClientRect().top;

        window.scrollTo({
          top: targetPos - (headerHeight + subMenuHeight),
          behavior: 'smooth',
        });
      },{ passive: false });
   });
  }
  export {smoothScroll}

function smoothScroll() {

// a href="#section_***"のものを取得する

const anchors: NodeListOf<HTMLElement> | null = document.querySelectorAll('a[href^="#section_"]');

const header: HTMLElement | null = document.querySelector('header');

if (anchors === null || header === null) return;

// ヘッダーの高さ

const headerHeight: number = header.offsetHeight;

anchors.forEach((anchor): void => {

anchor.addEventListener('click', (e: MouseEvent): void => {

e.preventDefault();

const href: string | null = anchor.getAttribute('href');

if (href === null) return;

// id="section_***"を取得する

const target: HTMLElement | null = document.getElementById(href.replace('#', ''));

if (target === null) return;

// id="section_***"の画面左上からの距離

const targetPos: number = target.getBoundingClientRect().top;

window.scrollTo({

top: targetPos - (headerHeight + subMenuHeight),

behavior: 'smooth',

});

},{ passive: false });

});

}

export {smoothScroll}

コメントをするコメントをキャンセル

コメントはありません。

a[href^=”#section_”]をクリックしたら#section_までスムースにスクロールして移動するJavaScript(TypeScriptバージョン)

コメントをする コメントをキャンセル

コメント

コメントをするコメントをキャンセル