【jQuery】ヘッダーメニューをクリックした時に、ページ内の指定位置に移動させる方法

結論

コード

$('.メニューのクラス名').click(function(){
    $("html,body").animate({scrollTop: $('.指定位置の要素のクラス名').offset().top});
 })

サンプル

to-designated-position

解説

特徴をクリックしたら
f:id:khirok:20200423180631p:plain
特徴の箇所へ
f:id:khirok:20200423181115p:plain

使い方をクリックしたら
f:id:khirok:20200423180631p:plain
使い方の箇所へスクロールする。
f:id:khirok:20200423181223p:plain

こんな動きを、jQueryを使ってどうやって実現させるかを解説します。

クリックする箇所のHTMLがこちら

<header class="header">
   <ul>
     <li>特徴</li>
     <li>施設</li>
     <li>使い方</li>
     <li>よくある質問</li>
   </ul>
 </header>

そして、クリック後の箇所はこちらです。
(例として、リストの3つめを挙げました。)

<section class="usage">
    <h1>使い方</h1>
</section>

使い方をクリックして、使い方の箇所にスクロールさせたい時には、このようなjQueryを記述します。

$('.header li:nth-child(3)').click(function(){
    $("html,body").animate({scrollTop: $('.usage').offset().top});
 })

ヘッダーにあるリストの3つ目をクリックしたらイベントが発生し、
usageというクラスの要素の高さまで、全体がスクロールされます。

 $('').offset().top

これで、ある要素のY座標の位置を取得出来ます。

ソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>to-designated-position</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="query.js"></script>
</head>
<body>
  <header class="header">
    <ul>
      <li>特徴</li>
      <li>施設</li>
      <li>使い方</li>
      <li>よくある質問</li>
    </ul>
  </header>
  <main>
    <section class="characteristic">
      <h1>特徴</h1>
    </section>
    <section class="facility">
      <h1>施設</h1>
    </section>
    <section class="usage">
      <h1>使い方</h1>
    </section>
    <section class="faq">
      <h1>よくある質問</h1>
    </section>
  </main>
</body>
</html>

SCSS

li {
  list-style: none;
}
@mixin li-size {
  padding: 5px 20px;
  border-radius: 10px;
}
@mixin main-content {
  height: 100vh;
  text-align: center;
  padding-top: 60px;
}
@mixin title-padding {
  h1 {
    padding-top: 10px;
  }
}
header {
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 101;
  background-color: #fff;
  display: flex;
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    padding: 0 60px;
    li {
      cursor: pointer;
      &:nth-child(1) {
        background-color: #f0f8ff;
        @include li-size;
      }
      &:nth-child(2) {
        background-color: #e6e6fa;
        @include li-size;
      }
      &:nth-child(3) {
        background-color: #b0c4de;
        @include li-size;
      }
      &:nth-child(4) {
        background-color: #f5f5f5;
        @include li-size;
      }
    }
  }
}
main {
  height: 400vh;
  .characteristic {
    @include main-content;
    @include title-padding;
    background-color: #f0f8ff;
  }
  .facility {
    @include main-content;
    @include title-padding;
    background-color: #e6e6fa;
  }
  .usage {
    @include main-content;
    @include title-padding;
    background-color: #b0c4de;
  }
  .faq {
    @include main-content;
    @include title-padding;
    background-color: #f5f5f5;
  }
}

jQuery

$(function(){
  $('.header li:nth-child(1)').click(function(){
    $("html,body").animate({scrollTop: $('.characteristic').offset().top});
  })
  $('.header li:nth-child(2)').click(function(){
    $("html,body").animate({scrollTop: $('.facility').offset().top});
  })
  $('.header li:nth-child(3)').click(function(){
    $("html,body").animate({scrollTop: $('.usage').offset().top});
  })
  $('.header li:nth-child(4)').click(function(){
    $("html,body").animate({scrollTop: $('.faq').offset().top});
  })
});