https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > Common JS

Common JS


どのサイトも共通で使用する基本的なjavascriptプログラムです。
Jqueryをベースにしています。(Jqueryの読み込み必要)

「CODE」ボタンをクリックすると参考コードを参照できます。


1.スムーズスクロール

「ID」もしくは「?(パラメータ)」へのリンクに効くスムーズスクロール


例)よく使うTOPへとぶリンク

html <body>開始直後 ※TOP位置(飛ばす位置) IDに「top」などと任意で指定(必ずIDで指定) <span id="top"></span>
html TOPへのリンクのタグ ※適当な画像やテキストにリンクを貼る <a href="#top"><img src="/_common/image/pagetop.png" alt="ページの先頭へ" width="100" height="50"></a>
html </body>直前 <script> // スムーズスクロール $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 500; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script>

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会