【jQuery】ヘッダーメニューをクリックした時に、ページ内の指定位置に移動させる方法
結論
コード
$('.メニューのクラス名').click(function(){ $("html,body").animate({scrollTop: $('.指定位置の要素のクラス名').offset().top}); })
解説
特徴をクリックしたら
特徴の箇所へ
使い方をクリックしたら
使い方の箇所へスクロールする。
こんな動きを、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}); }) });