webサイト制作でよく利用するjavascriptのススメ

目次

１　スムーススクロール
２　クリックされたときにclassを追加する
３　ファーストビューのフルスクリーン対応

スムーススクロール

スムーススクロールという名称にはあまり心あたりが無い方もいらっしゃるかもしれません。
サイトを見てる時、クリックしたら下に流れるように動いて、リンク先の項目に移動するようなサイトを、見たことはないでしょうか？

ページ内リンクはどのサイトでも比較的使われることの多い動きなので、参考にしていただければと思います。

// スムーススクロール
$(function(){
$(‘a[href^=#]’).click(function(){
var speed = 800; // スクロールの速さを調整
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top;
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});

こちらをjsファイルやhtmlファイルに記入していただくと、ページ内リンクがするーっと動くようになると思います。数字のところを変えると、動きが早くなったり遅くなったりしますので、お好みで変えてみて下さい。

クリックされたときにclassを追加する

次は何かのコンテンツがクリックされた時class名を追加する方法についてです。

これはどんな時に使うかというと、サイト内でボタンなどクリックした時に、隠れていたコンテンツが表示されるようにしたい場合などに使います。

http://mugen00.moo.jp/web/jquery/accordion-menu

上記のサイトで分かりやすく解説いただいていたのでリンクでご紹介させていただきます。

ファーストビューのフルスクリーン対応

ウェブページで最初に目を引くものはなにか？
サイトにアクセスして一番最初に見える画面（ファーストビュー）ですよね。
しかしパソコンの画面サイズはそれぞれ違いますので、もメインビジュアルがを見切れてしまったりすることもあります。

そんな問題を解決するためはこのコードを使用すれば解決します。

id=”mv”というID名を設定し、mv内にメインビジュアルの画像を背景で読み込んでおいて下さい。

$(document).ready(function () {
hsize = $(window).height();
$(“#mv”).css(“height”, hsize + “px”);
});
$(window).resize(function () {
hsize = $(window).height();
$(“#mv”).css(“height”, hsize + “px”);
});

その後、上記の内容を書くだけで#mv内に入っている画像等がウィンドウの画面サイズより大きかった場合でもウィンドウサイズにあわせて縦横比を維持したまま伸縮させてくれるようになります