【jquery】タグの記事一覧｜ミトラボ https://mito-lab.com フリーランスWebデザイナーの実験と備忘録 Fri, 08 Jan 2021 00:43:25 +0000 ja hourly 1 https://wordpress.org/?v=5.6.17 https://mito-lab.com/wp-content/uploads/2019/11/cropped-fav_mitolab2.0-1-32x32.jpg 【jquery】タグの記事一覧｜ミトラボ https://mito-lab.com 32 32 jQueryで簡易的な検索機能(フィルター機能)を作る方法 https://mito-lab.com/jquery-selectitem/ https://mito-lab.com/jquery-selectitem/#respond Thu, 07 Jan 2021 14:47:45 +0000 https://mito-lab.com/?p=2810 こんにちは、mito(@mito_works)です。

同じ形式のデータの羅列（表やリストなど）の場合、件数が多ければ多いほど、必要な情報を素早く探せることが重要になります。

momo
momo
例えばテーブルデータ200件並べてその中から、必要な情報を探してね..と言うのはちょっとユーザビリティが悪いよね。
mito
mito
今回は、データベースを設計しないまでも手軽に簡易的な検索、フィルタ（絞り込み）ができる方法のご紹介です
こんな人におすすめ

HTML,CSS,jQueryのみで簡易的な検索機能を実装したい方

実装の条件

  • 複数データをテーブル形式（表）で表示する
  • チェックボックスで選択した年度のデータのみ表示する

事前準備

今回は、エクセルの表データをHTMLのテーブルに置き換えて表示することを想定しました。

momo
momo
以下のようなツールで簡単にExcelからHTMLに変換できるよ
Excel to HTML

HTMLの実装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <form class="js-filter-form list_checkbox">
        <label><input type="checkbox" name="year" value="18年度" checked>2018年度</label>
        <label><input type="checkbox" name="year" value="19年度" checked>2019年度</label>
        <label><input type="checkbox" name="year" value="20年度" checked>2020年度</label>
    </form>

    <table class="js-filter-items">
        <thead>
            <tr>
                <td>年度</td>
                <td>チーム名</td>
                <td>タイトル</td>
                <td>概要</td>
            </tr>
        </thead>
        <tbody>
            <tr data-cat="18年度">
                <td>18年度</td>
                <td>チームりんご</td>
                <td>りんごの育て方</td>
                <td>りんごの育て方について詳しく解説します。</td>
            </tr>
            <tr data-cat="18年度">
                <td>18年度</td>
                <td>チームみかん</td>
                <td>みかんの育て方</td>
                <td>みかんの育て方について詳しく解説します。</td>
            </tr>
            <tr data-cat="19年度">
                <td>19年度</td>
                <td>チームバナナ</td>
                <td>バナナの育て方</td>
                <td>バナナの育て方について詳しく解説します。</td>
            </tr>
            <tr data-cat="20年度">
                <td>20年度</td>
                <td>チームざくろ</td>
                <td>ざくろの育て方</td>
                <td>ざくろの育て方について詳しく解説します。</td>
            </tr>
            <tr data-cat="20年度">
                <td>20年度</td>
                <td>チームざくろ</td>
                <td>ざくろの育て方</td>
                <td>ざくろの育て方について詳しく解説します。</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script text="text/javascript" src="./script3.js"></script>
</body>
</html>

 

jQueryの実装

実装概要

  • チェックボックスにチェックした値を配列に追加する(push)
  • チェックボックスの値と比較する値をテーブルの行単位で取得する
  • テーブルの行単位で取得した値とチェックボックスの値が一致するかチェックする（inArray）
  • 一致しない場合は、hiddenクラスを付与する(addClass)
  • 一致する場合は、hiddenクラスを除く(removeClass)
$(".js-filter-form :checkbox").on("click", function(){
	var checked = [];
	$(".js-filter-form :checked").each(function(){
		checked.push($(this).val());
	});
    console.log(checked);
    
    $(".js-filter-items tbody tr").each(function(){
        var cat = $(this).data("cat");
        console.log(cat);
		var is_exist = $.inArray( cat, checked );
        console.log('exit' + is_exist);
        if (is_exist != -1) {
			$(this).removeClass("hidden");
		
		} else {
			$(this).addClass("hidden");
		}
    });
});
momo
momo
hiddenクラスについてはcssで表示非表示の設定をするよ！

CSSの実装

table{
    border-collapse: collapse;
    border: solid 2px gray;
}
table td{
    border: dashed 1px gray;
    padding:20px;
}
table thead{
    background:#FABE23;
    color:#fff;
}
.hidden{
    display: none;
}

tableの整形と、hiddenクラスの設定を行います。

完成イメージ

mito
mito
デフォルトは全てチェックが入った状態です
mito
mito
チェックボックスを外すと外された部分は非表示となります

–END–

]]> https://mito-lab.com/jquery-selectitem/feed/ 0 【簡単】wowで要素をふわっと表示させたりシュッと表示させるアニメーションをつける https://mito-lab.com/jquery-animation/ https://mito-lab.com/jquery-animation/#comments Thu, 03 Oct 2019 04:19:01 +0000 https://mito-lab.com/?p=1350 こんにちは。mito（@mito_works）です。

今回は、jQueryのライブラリーを使って要素がふわっと登場するアニメーション
を簡単に実装する方法です。

momo
momo
こんな動きが簡単にできるよ！

こんな人におすすめ

Webサイトに動きをつけて個性や世界観を表現したい人

mito
mito
使い方、順を追って解説します！

ダウンロード

ソースコードをgithub上から取得します。
https://github.com/graingert/wow

momo
momo
WOW.js本家の商用利用には有料の公式ライセンスが必要なので、無料で商用利用できるMIT版をダウンロードしたよ！

フォルダへの配置

ダウンロードするとたくさんファイルやフォルダがありますが、必要なものはdistフォルダとanimate.cssのみです。

mito
mito
distフォルダとanimate.cssをコーディングしているフォルダに配置します。

HTMLの記述

HTMLの手順
  1. ライブラリを読み込む
  2. アニメーションの指定をする
    <link rel="stylesheet" href="css/animate.css">
    <script src="dist/wow.min.js"></script>

 

momo
momo
wow.min.jsはjqueryを読み込まないと動かないので必ずjqueryの記述の後に書いてね。
<div class="col-lg-4 col-md-6 col-sm-12">
    <div class="card wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s">
       <img class="card-img-top" src="img/card-img.svg" alt="">
           <div class="card-body text-left">
              <h4 class="card-title">タイトルタイトル</h4>
              <p class="card-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
           </div>
     </div>
</div>
mito
mito
wow bounceInLeft この部分で左からシュッと出てくるアニメーションの指定をしています。

wowクラスはスクロールが来た時にアニメーションを動かすための宣言。

bounceInLeftクラスはアニメーションの種類です。

オプションの解説

data-wow-duration アニメーションの時間
data-wow-delay アニメーションがスタートするまでの時間
data-wow-offset アニメーションスタートの距離
data-wow-iteration アニメーション繰り返しの回数
mito
mito
アニメーションの時間(data-wow-duration)とアニメーションがスタートするまでの時間(data-wow-delay)この2つの指定で十分かと思います！

jQueryの記述

jsでwowを使いますということを宣言しないと使えません。
(以下はscript.jsでの記載内容です)

new WOW().init();

 

スクロールされるたびに動きをつけたい場合

data-wow-iterationでアニメーションの回数を指定するのではなくて、スクロールされるたびに動きをつけたい場合は以下のように書きます。

    $(window).scroll(function(){
        new WOW().init();
    });

 

アニメーションの種類

momo
momo
こちらにアニメーションの種類一覧があるので自分好みのアニメーションを見つけてみてね！

https://github.com/daneden/animate.css

mito
mito
ちなみに私は「flipInX、rollIn」が好きです！

こちらのサイトでもアニメーションの動きを確認できます。

animate.css

まとめ

jQueryのライブラリーwowのご紹介でした。
簡単に様々な種類のアニメーションが実装できることがお分りいただけたと思います。

ただし、あくまでスクロールというアクションがないと動作しないのでご注意ください！

]]> https://mito-lab.com/jquery-animation/feed/ 2 30DAYSトライアル〜jQueryの基礎を学ぶDAY4~6〜 https://mito-lab.com/coding-30days-2nd-4-6/ https://mito-lab.com/coding-30days-2nd-4-6/#respond Thu, 12 Sep 2019 03:34:59 +0000 https://mito-lab.com/?p=1248 こんにちは。mito（@mito_works）です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

30DAYSトライアルの始め方

mito
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

4. 30DAYSトライアル【コーダーとして企業と仕事ができる実力をつけよう】

momo
momo
2ndのDAY4~6はprogateを使ってjQueryを学んでいくよ！

jQueryとは

QueryはJavaScriptのライブラリの1つでHTMLとCSSだけでは実現できなかったアニメーションなどの動きを実現します。

基本の書き方

  1. jQueryオブジェクトを作成
  2. そのjQueryオブジェクトに対してメソッド（機能）を呼び出す

①$(‘セレクタ’)②.メソッド(引数);

例） $(‘h1’).hide();

momo
momo
jQueryのオブジェクトは$(‘セレクタ’)で生成される配列のような構造をしているものだよ！セレクタにはHTMLのタグ名やclass名などを指定してね。
mito
mito
jQueryのオブジェクトの中身は合致した要素が配列のように並んでいるんだね〜。
Tips

メソッドのhide();と似たものとしてfadeOut();があります。後者の場合アニメーションをつけることが可能です。

要素を非表示にしたい hide(); fadeOut(); slideUp();
非表示を表示したい show(); fadeIn(); slideDown();
css要素を変更したい css(‘プロパティ名’,’値’;)　ex) css(‘display’,’block’);
文字列を置き換えたい text(”置き換えたい内容);
htmlを置き換えたい html(置き換えたい内容);
子要素全て取得したい find(‘セレクタ’);
1階層下の子要素を取得したい children(‘セレクタ’);
クラスを付与したい addClass(‘クラス名’);
クラスを外したい removeClass(‘クラス名’);
引数に指定したクラスを、オブジェクトが持っているか判定したい hasClass(‘クラス名’);
指定したindex番号の要素を取り出したい eq(数字);
特定の要素のindex番号を取得したい index($(‘セレクタ’));  ex)$(‘.index-btn’).index($(this)); //クリックしたボタンの番号取得
兄弟要素（同じ階層の要素）の中から一つ前の要素を取得したい prev();
兄弟要素（同じ階層の要素）の中から一つ後の要素 next();
要素の個数を取得したい length();
HTML属性をget、setしたい attr();
値を取得したい val();
値をセットしたい val(‘セットしたい値’);
アニメーションをつけたい animate({‘プロパティ’: 値},秒数);
ページ上部から指定したpxの場所へ移動したい $(‘html, body’).scrollTop(0); //最上部の場合は0
スクロールにアニメーションをつけたい $(‘html, body’).animate({‘scrollTop’: 0}, 時間);
要素の表示位置を取得したい $(‘h1’).offset(); //h1要素の表示位置 (topからxx、leftからxxなど)

$(‘h1’).offset().top; //トップからh1の距離
Tips

attr(‘id’, ‘topMessage’)のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます。

if文の中身の=は2つで繋げます。

if (Index == 0) {
      $('.prev-btn').hide();
    } else if (Index == $('.slide').length-1) {
      $('.next-btn').hide();
}

classとidの使いわけ

idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。
なので、jQueryオブジェクトのセレクタにはidを使うことが推奨されています。

処理を行うタイミングの指定

イベントを用いると処理を行うタイミングを設定できます。

mito
mito
例えば、このボタンが押されたらモーダルを開くなどです。

$(‘セレクタ’).イベント名(function(){ });

 $('#open-btn').click(function(){
    $('#modal').fadeIn();
  });
クリック時のイベント click(function(){});
ホバー時のイベント hover(function(){},funtion(){});
送信時のイベント submit(function(){});
momo
momo
hoverはマウスを①乗せたとき、②離した時の設定をするため引数は2つだよ。

thisの使い方

thisを使うと、実際にイベントが起こった要素を取得できます。

momo
momo
例えば複数行あるリストの中のクリックした行のみの要素を取得したい場合などに使うよ。
  $('.li').click(function(){
    $(this).css('color','blue');
  });

 

変数の宣言

変数宣言にはvarを使います。

var 変数名= 要素；

jQuery使用の準備

  1. <head>タグの中でjQueryライブラリを読み込む
  2. </body>の直前にjsファイルを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
momo
momo
<script>はCSSファイルの読み込みのように<head>タグの中にも書けるけれど、</body>の直前に書くことで、Webページの表示速度をより早めることができるよ！

カスタムデーター属性

属性は自分でつくることもできます。これをカスタムデータ属性と言います。

momo
momo
「data-」から始まる属性名を自由に設定できるよ！

 

]]> https://mito-lab.com/coding-30days-2nd-4-6/feed/ 0 【jQuery】ハンバーガーメニュー(ドロワーメニュー)の作り方 https://mito-lab.com/drawer-menu/ https://mito-lab.com/drawer-menu/#respond Mon, 10 Jun 2019 04:21:46 +0000 https://mito-lab.com/?p=787 こんにちは、mito（@mito_works）です！

今回は、jQueryとCSSだけでハンバーガーメニューを作りたいと思います。

HTMLでの記載

<header>
 <div id=“navToggle”>
  <div>
   <span></span> <span></span> <span></span>
  </div>
 </div>

 <nav id=“menu”>
  <ul>
   <li><a href=“#”>HOME</a></li>
   <li><a href=“#taitle-gaiyou”>開催概要</a></li>
   <li><a href=“#taitle-program”>プログラム</a></li>
   <li><a href=“#taitle-contact”>お問合わせ</a></li>
  </ul>
 </nav>
</header>

CSSでの記載

ハンバーガーメニュー表示の制御です。

#navToggle {
 display:none;
 position:absolute; /*bodyに対しての絶対位置指定*/
 right:13px;
 top:13px;
 width:30px;
 height:25px;
 cursor:pointer;
 padding: 12px 0;
}
#navToggle div {
 position:relative;
}
#navToggle span {
 display:block;
 position:absolute; /*#navToggle div に対して*/
 width:100%;
 border-bottom:solid 3px #fff;
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
 top:0;
}
#navToggle span:nth-child(2) {
 top:11px;
}
#navToggle span:nth-child(3) {
top:22px;
}
header nav {
 position: absolute;
 right:0;
 top: -800px;
 background-color: #fff;
 width:50%;
 padding:0 10px;
 -webkit-transition:.5s ease-in-out;
 -moz-transition:.5s ease-in-out;
 transition:.5s ease-in-out;
 text-align:left;
}

以下のようなハンバーガーメニューを作りました。

momo
momo
header navのところで、top -800pxとしているので、このままでは実際には見えない状態だよ。

jQueryでの記載

mito
mito
jQueryではハンバーガーメニューの三本線をクリック時に×に変形させたいので、指定した要素にアクションと連動させて名前を付けたり消したりする処理を書いています。

.toggleClassメソッド

POINT!!

指定した要素に指定したクラス名を付けたり消したりできる。
clickファンクションで使うと、クリックするたびにクラス名を付けたり消したりできる。

   $('#navToggle').click(function(){
           $('header').toggleClass('openNav');
   });
momo
momo
今回はクリックに連動させて、headerに .openNav を付加・削除しているよ！

再びCSSの記載（メディアクエリの設定）

画面横幅が768px以下の場合の設置を記載します。

  1. ハンバーガーメニューのメニュー内容の表示制御
  2. クリック時に横棒を45度傾け×にする処理
  3. ハンバーガーメニューが表示されるようにする
  4. ハンバーガーメニューのメニュー内容が表示されるようにする
header ul {
	margin:0;
}
header ul li {
    display:block;
 	margin-left:3px;
    border-bottom:dotted 1px #2c9caf;
    line-height:3;
}
header ul li a {
	display:block;
	color:inherit;
	padding-left: 3px;
}
header ul li::after {
	content:'';
}
header ul li:last-child {
	border-bottom:none;
}
/*レスポンシブのメニューのお申し込みのみ背景色をかえる*/
header nav .nav-buy{
	background-color: #cc2e4c;
	margin-top: 4px;
	color: #fff;
}
#navToggle {
	display: block;
}
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*header menu*/
.openNav nav {
    -moz-transform: translateY(876px);
    -webkit-transform: translateY(876px);
    transform: translateY(876px);
}

ハンバーガーメニューが表示され、クリックするとメニュー内容が表示されます。

こちらを参考にさせていただきました。

ドロワーメニュー（ハンバーガーメニュー）を簡単な jQueryとCSSだけで作る手順

ーEndー

 

 

]]> https://mito-lab.com/drawer-menu/feed/ 0 【jQuery】モーダルウィンドウの作り方と表示時にページ上部に戻ってしまう対処法 https://mito-lab.com/jquery-modal-window/ https://mito-lab.com/jquery-modal-window/#respond Thu, 06 Jun 2019 00:36:41 +0000 https://mito-lab.com/?p=773 こんにちは、mito（@mito_works）です！

今回は、モーダルウィンドウの作り方と、モーダルウィンドウ表示時に親画面がページ上部に戻ってしまうときの対処法について書きます。

全体的な動き

以下の3ステップを実装していきます。

  1. リンクもしくはボタンを押す
  2. モーダルウィンドウが表示される
  3. 閉じるもしくは×を押すと閉じる

HTMLでの記載

モーダルウィンドウを作る。

<div class="modal-wrapper" id="map-modal">
<!-- モーダル全体の枠　-->
　<div class="modal">
<!-- 右上に配置する×ボタン　-->
　　<div class="close-modal">
　　　<i class="fa fa-2x fa-times"></i>
   </div>
　　<div class="modal-main">
　　　<div class="picture">
　　　　<img src="images/map.jpg">
　　　</div>
　　　<div>
　　　　<p class="map-detail">詳しい地図の内容を記載する</p>
　　　</div>
　　</div>
<!-- 閉じるボタン　-->
　　<div class="closebutton">
　　　<button class="close">閉じる</button>
　　</div>
　</div>
</div>

 

モーダルウィンドウへの遷移元を作る。

<div>													 
 <p class="mapinfo" href="">												 
   <a class="mapinfo-show1">詳しい地図はこちら</a>												 
 </p>
</div>

 

CSSでの記載

モーダルウィンドウの装飾部分を記載する。

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
.modal {
  position: absolute;
  top: 20%;
  left: 24%;
  background-color: #e6ecf0;
  padding: 20px 20px 20px;
  border-radius: 10px;
  width: 650px;
  height: auto;
}
.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

.closebutton{
	text-align:center;
	margin-top:10px;
}

.close {
  display: inline-block;
  padding: 10px 140px;
  background-color: #0091a7;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

JavaScriptでの記載

モーダルウィンドウを開くときの制御を作る。

POINT!!

モーダルウィンドウを開いたときの親画面の位置を記憶しておく。

//グローバル変数
var sX_syncerModal = 0 ;
var sY_syncerModal = 0 ;

function scrollposition(){
	//スクロール位置を記録する
	var dElm = document.documentElement , dBody = document.body;
	sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft;	//現在位置のX座標
	sY_syncerModal = dElm.scrollTop || dBody.scrollTop;	//現在位置のY座標
}

 

momo
momo
この記載をして、位置をずらさないように制御しないと、モーダルウィンドウを閉じる時に親画面のトップに戻ってしまうよ。

モーダルウィンドウを表示するためにクリックされた時の制御を作る

$(function() {
 	// モーダル表示を行うclickイベント
 	$('.mapinfo-show1').click(function(){ 
 		scrollposition();
		$('#map-modal').fadeIn();
	});
});

 

モーダルウィンドウを閉じる時の制御を作る

//「Close」ボタンクリックした際に閉じる処理
$('.close').on('click', function() {
 //スクロール位置を戻す
 window.scrollTo( sX_syncerModal , sY_syncerModal );
 $('#map-modal').fadeOut();
});

//×ボタンをクリックした際に閉じる処理
$('.close-modal').click(function(){ 
　window.scrollTo( sX_syncerModal , sY_syncerModal );
　$('#map-modal').fadeOut();
});

mito
mito
これでモーダルウィンドウを閉じると親画面の元の位置に戻ります。

まとめ

  • モーダルウインドウを開くときに親画面の表示位置を取得しておくこと。
  • モーダルウィンドウへの遷移後、親画面へ戻る際に取得位置を記載すること。
  • リンクでモーダルウィンドウへ遷移する際、HTMLのaタグhrefは書かない。

mito
mito
href=””を残していて、モーダルウィンドウへ遷移した際にページ上部に戻ってしまい、悩みました。
momo
momo
hrefを消してしまうと、デフォルト設定のカーソルや下線などはなくなるのでCSSで設定する必要があるよ。
a.mapinfo-show1{
　color: #0091a7;	
　text-decoration: underline;	
　cursor: pointer;
}

 

ーEndー

]]> https://mito-lab.com/jquery-modal-window/feed/ 0 【JavaScript】ヘッダー固定時にページ内リンクのズレを解消して記事の途中に飛ばすには？ https://mito-lab.com/link_jump/ https://mito-lab.com/link_jump/#respond Wed, 05 Jun 2019 05:47:50 +0000 https://mito-lab.com/?p=765 こんにちは、mito（@mito_works）です！

今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか？書きます。

mito
mito
position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。

momo
momo
JavaScriptで実装するとリンク先への移動にアニメーションをつけることが可能になるよ！

 

HTMLでの記載

<!--ヘッダー部分 -->
<header>
 <div class="header">
  <a href="#taitle-program" >プログラム</a>
 </div>
</header>

<!--ページの途中のタイトル部分 -->
<div class="program">
 <h3 class="title-about" id="taitle-program">プログラム</h3>
</div>

<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。

  1. リンクの飛び先にidを指定
  2. <a>タグのhref属性に”#id名”
momo
momo
<a>タグをクリックすると、そのidの要素が表示されている場所まで移動するという動きになるよ！

CSSでの記載

ヘッダーの高さは90pxで固定しています。

header {
  height: 90px;
  width: 100%;
  background-color: rgba(0, 145, 167, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

JavaScriptで調整する

//ナビゲーションからのページ内移動
//固定したヘッダ分だけ下げて表示
$('header a').click(function(){
　headerHight = 90;
　var id = $(this).attr('href');
　var position = $(id).offset().top;
　$('html, body').animate({'scrollTop': position-headerHight }, 500);
});

 

scrollTopメソッド

$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。

momo
momo
scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ！

animateメソッド

CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。

momo
momo
変更するプロパティ、値、アニメーションの速さの順で、animateの引数を書くよ！

offsetメソッド

要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
offset().topとすると、ページの上端からの距離が取得できる。

例えば

HTMLで記載しているh1のプログラムの位置が知りたい場合
$(‘h1’).offset();とすると　{top:50,left:100}という連想配列が返ってくる。$(‘h1’).offset.top();とすると、ページ上端からの距離のみなので50という値が返ってくる。

attrメソッド

href属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる。

var id = $(this).attr('href');
var position = $(id).offset().top;
  1. idにクイックしたボタンの飛び先を取得
  2. 飛び先の最上部からの距離を取得

今回はヘッダーの高さ分引き算をしています。

]]> https://mito-lab.com/link_jump/feed/ 0