CakePHP3歴 1年のWEBエンジニアの備忘メモです。ブログ内容はCakePHP3.5 (PHP7.1) で検証しています。

jQuery3 animateで指定位置まで移動するサンプルコード

投稿日：2017年12月4日

jQuery3 animateで指定位置まで移動するサンプルコードです。

<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
animate_scroll($('#test'));
// targetまでanimateにて移動
function animate_scroll(target) {
if (!target) {
return false;
}
var target_position = target.offset().top; // 移動位置取得
var adjustment_num = 20; // 位置調整(targetから上に20px)
target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;
$('html, body').animate({scrollTop: target_position}, 400, 'linear');
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div id="test"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

animate_scroll($('#test'));

// targetまでanimateにて移動

function animate_scroll(target) {

if (!target) {

return false;

}

var target_position = target.offset().top; // 移動位置取得

var adjustment_num = 20; // 位置調整(targetから上に20px)

target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;

$('html, body').animate({scrollTop: target_position}, 400, 'linear');

}

</script>

-jQuery3
-サンプルコード, animate

執筆者：管理人

comment コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコード

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコードです。

// 日付と時刻チェックのサンプルコード
<script>
console.log(checkDate(2017,12,04));
console.log(checkTime(10,11));
// 日付チェック(戻り値: true or false)
// ex) Y:2017, m:12, d:04
function checkDate(Y, m, d) {
var m = parseInt(m, 10);
var d = parseInt(d, 10);
var check_date = Y+'/'+m+'/'+d;
var date = new Date(check_date);
if (　check_date == (date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate())　)　{
return true;
} else {
return false;
}
}
// 時刻チェック(戻り値: true or false)
// ex) H:10, i:11
function checkTime(H, i) {
var H = parseInt(H, 10);
var i = parseInt(i, 10);
if (0 <= H && H <= 23 && 0 <= i && i <= 59) {
return true;
} else {
return false;
}
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

// 日付と時刻チェックのサンプルコード

<script>

console.log(checkDate(2017,12,04));

console.log(checkTime(10,11));

// 日付チェック(戻り値: true or false)

// ex) Y:2017, m:12, d:04

function checkDate(Y, m, d) {

var m = parseInt(m, 10);

var d = parseInt(d, 10);

var check_date = Y+'/'+m+'/'+d;

var date = new Date(check_date);

if (　check_date == (date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate())　)　{

return true;

} else {

return false;

}

}

// 時刻チェック(戻り値: true or false)

// ex) H:10, i:11

function checkTime(H, i) {

var H = parseInt(H, 10);

var i = parseInt(i, 10);

if (0 <= H && H <= 23 && 0 <= i && i <= 59) {

return true;

} else {

return false;

}

}

</script>

: jQuery UI モーダルでダイアログを開くサンプルコード
jQuery UI モーダル(modal)でダイアログを開くサンプルコードです。 ※ jQuery 3.1 / jQuery UI 1.12 [crayon-6 …

jQuery3 Ajax通信のサンプルコード

jQuery3 Ajax通信のサンプルコードです。

// ex) カテゴリ追加
$(function(){
$.ajax({
url: '/add',  // リクエスト送信先URL
type: 'POST', // get or postメソッド
timeout: 2000, // タイムアウト時間をミリ秒で設定
cache: false,  // キャッシュ無効
data: {'category_name': category_name}, // サーバーに送信する値
dataType: 'json' // サーバーから返されるデータ型
}).done(function (response, textStatus, jqXHR) {
// サーバー側[php] echo json_encode(['status' => true or false]);
if (response.status) {
// 追加成功
alert('success.');
} else {
// 追加失敗
alert('error.');
}
}).fail(function (jqXHR, textStatus, errorThrown) {
// 通信失敗
alert('error.');
});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// ex) カテゴリ追加

$(function(){

$.ajax({

url: '/add', // リクエスト送信先URL

type: 'POST', // get or postメソッド

timeout: 2000, // タイムアウト時間をミリ秒で設定

cache: false, // キャッシュ無効

data: {'category_name': category_name}, // サーバーに送信する値

dataType: 'json' // サーバーから返されるデータ型

}).done(function (response, textStatus, jqXHR) {

// サーバー側[php] echo json_encode(['status' => true or false]);

if (response.status) {

// 追加成功

alert('success.');

} else {

// 追加失敗

alert('error.');

}

}).fail(function (jqXHR, textStatus, errorThrown) {

// 通信失敗

alert('error.');

});

});

JavaScript 数字先頭に0を追加する関数のサンプルコード

JavaScript　数字の先頭に0を追加する関数のサンプルコードです。

<script>
console.log(digitFormat(1,3)); // 出力ログ:001
// 数字の先頭に0を追加してdigitで指定された桁数に変換する
function digitFormat(num, digit) {
var len = String(num).length;
if(digit > len) {
return (new Array((digit - len) + 1).join(0)) + num;
} else {
return num;
}
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

<script>

console.log(digitFormat(1,3)); // 出力ログ:001

// 数字の先頭に0を追加してdigitで指定された桁数に変換する

function digitFormat(num, digit) {

var len = String(num).length;

if(digit > len) {

return (new Array((digit - len) + 1).join(0)) + num;

} else {

return num;

}

}

</script>

PREV: CakePHP3 ビュー(Template)から独自Helperを使うサンプルコード
NEXT: JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコード

: 2022/07/28
PHPフレームワーク Laravel Webアプリケーション開発バージョン8.x対応 [ 竹澤有貴 ] のメモ

: 2022/06/19
楽天ふるさと納税とは？

: 2022/06/19
Binance Chainとは

: 2022/06/19
Bybit(バイビット) 紹介

: 2021/10/02
Bybit (バイビット) でクラウドマイニングしてみた

人気の記事

CakePHP3 よく使うfindメソッドまとめ - 23,559 views
CakePHP3のレコード更新方法まとめ (save・updateAll) - 16,676 views
CakePHP3 フォームからのPOSTデータ取得方法 - 15,371 views
CakePHP3 本番環境用にデバッグモード無効にする方法 - 11,165 views
CakePHP3のレコード削除方法まとめ (delete・deleteAll) - 9,640 views
CakePHP3 フラッシュメッセージの設定・表示方法 - 9,062 views
CakePHP3 セッション(session)使い方 - 7,478 views
CakePHP3 バージョン確認方法 - 6,891 views
CakePHP3 GETメソッドのクエリストリングを取得する方法 - 5,473 views
CakePHP3 コントローラーでのリダイレクト処理 - 4,730 views

最近の投稿

カテゴリー

イーサリアムアドレス【ETH】