blog

BLOGブログ

ARCHIVES

VAX

梅雨ですね。そうだ熊本で就職しよう!そして【今すぐ使える】ページトップに戻るアレも覚えちゃおう

DSCF3617ひょんなことから熊本県人になりました。

 

 

 

 

イケメンの後におかしな人が出てきてしまって申し訳ないです。

 

 

いつもチェックのシャツを着ています。

どーもVAXです。

初めてついた呼び名ですがどうでしょうか?

 

 

ありがとうございます。

6月から新たに株式会社エフに入社しました。

 

僕の経歴はろくなものではないので省略しますが、

35歳からWeb業界に飛び込んでまいりました。

ひょんなことからコーダーになりました。
どーもVAXです。
ありがとうございます。

 

僕の経歴はろくなものではないので省略しますが、
35歳からWeb業界に飛び込んでまいりました。

 

本当はカレーのことばっかり書きたいけど今後の記事はおそらくまじめなまじめな備忘録とかその辺になるので

Webの仕事始めました!的な方たちに同じ目線でお役に立てたらと思っております。

 

役立つかはわかりませんがお土産に簡単なそれっぽいことを残していきます。

 

 

 

 

 

 

 

JQueryを使ったページトップにスクロールしながら戻るアレ

 

 

タイトルがそれっぽい!!!!

 

他サイトでよく見かけるこれを最初に読み込んでねってやつも書いてみます。

何やかんだで僕が使っていて安心なのはこれです。
コピッて<head>内にでも貼り付けときましょう。

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

それでまずは何した時にどこに向かいたいか決めましょう。

 

まるで 人生のようですね。

 

それではわかりやすく

 

開始(現在): #start

終点(楽しかったあの頃): ページトップ

 

■ js

jQuery(function($){
$('#start').click(function(){
var top = $('html,body').offset().top;
$('html,body').animate({scrollTop:  top}, 1000);
return false;
});
});

 

■簡単な解説

return false;

 

こちらはありがちな  <a>  タグに

 

<a id=”start” >

 

こんな感じで書いた人は

 

return false; が必要です。

 

 

これは

 

<a>タグでページ遷移するのは無しよ

 

という意味なので書かないと再読み込みしちゃいます。

 

 

■html

<div id="start"></div>

これをページ内どこかに書いて

ボタンっぽく

 

■css

 

#start {
cursor:pointer
width:幅;
height:高さ;
}

 

 

 

cursor:pointer; については

 

さえあれば <a >タグではなく<img>でもマウスオーバー時にカーソルが指マークに変わるのでボタンぽく見せちゃうことができます。

 

 

ちなみにwordpressを使ってる方は

 

$(funciton) {    ではなく

 

jQuery(function($){

 

と書きましょう。

いつものことになるからこれ書いとけば大丈夫です。

 

demo

 

 

ありがちなミス?なんか動かないんだけど。。。ってときは

 

■まずはあせらずファイルを読む順番を見てみましょう。
これかなり重要です。

ソースコード呼ばれる html コードはページを読み込んだ時に
から順番に読み込んでいくので順番が大事だということです。
ダメなパターンでありがちなのは
<script src="○○.js"></script>  ← プラグインなどのファイル

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

 

jQueryというものを使いたいならまずその元が入ったファイルを読み込まないとあんた何したいのかわかんないぜよ。
わからんぜよ。

 

 

と怒られます。

 

 

怒られませんが動きません。
なので

 

 

① まずjQueryを使うためのライブリ的なものを読み込む

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

② プラグインなどを読み込む

<script src="○○.js"></script> ←プラグインなどのファイル

 

 

この順番大事です。

 

■2回も jQueryの元ファイル読み込むんじゃねーよ

 

 

これもやりがちですが

 

 

<head>内で

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
:
:
:
<script src="○○/jquery.1-6-2.min.js"> ←古いバージョン読み込んでしまってる
これも動かないパターン多いです。

 

 

 

 

 

結論からすると何をするにも順番が大事だってことですね。
cssの効果がなぜか付かないんだけど?ってときもひょっとしたら読み込む順番とタイミングで探してる要素の名前なんて見つからないんだけどと怒られるかもしれません。

 

これはいろんな人に怒られます。

 

 

 

ということでこれからは順番を意識して生きていきます。

 

次回はCoCo壱のお食事券ゲットできた話をするかもしれません。

 

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事