Pocket

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。

トップへ戻るやページ内リンクなどで利用範囲が広いですね。

目次

  • 通常の書き方
  • スクロール位置を調整
  • 特定のリンクを除外する
  • 特定のリンクを除外する・複数形
  • 特定のリンクを除外する・クラスで指定

通常の書き方

$(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;
 });
});

これで、#で始まるリンクをクリックすると指定したidの要素までスクロールします。

WordPressだと「$」が競合するので、「$」の部分を「jQuery」にしましょう。
($(function()→jQuery(function())

スクロールする位置を調整

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top - 120; 
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

var position = target.offset().top – 120; でスクロールする位置を調整します。
追従するヘッダー等を設定している場合は設定しないと要素が隠れてしまうことがあります。

特定のリンクを除外する

スライダーやドロワーメニュー等が挙動がおかしくなってしまう事があるので、特定のIDを除外する方法も覚えておきましょう。

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll"])').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;
 });
});

:not(a[href=”#noscroll”]を追加する。

この場合、「#noscroll」となっているaタグはスクロール処理しない

特定のリンクを除外する・複数形

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll_1"],a[href="#noscroll_2"])').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;
 });
});

:notに複数条件を設定する。
この方法だと、除外するIDが増えるたびに追加する必要があり、面倒です・・
それで次の方法です。

特定のリンクを除外する・クラスで指定


$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a.noscroll))').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;
 });
});

上記のように:not(a.noscroll)を追加してclass指定してしまえば楽ですね。必要に応じてIDとclass複合的にしてしまってもいいかと思います。

これで自由自在にスクロールできますね。

では、また。

Pocket

Pocket

Pocket

Pocket

画像がたくさん並んでいると、クリックして拡大するのは面倒だし、ぱっと大きい画像を表示したいことってよくありますよね。

色々な方法があるのですが、シンプルな方法がみつかりましたので、備忘録です。

jqueryを使うので読み込み忘れないようにしてください。

準備(HTMLとCSS)

メイン画像とサムネイル画像を表示します。

#mainImage の中に画像をメイン画像を設定します。

サムネイル画像は #imageList の中です。

HTML

 
<div id="mainImage">
<img src="sample1.jpg" />
</div>

<div id="imageList">
<ul>
<li><img src="sample1.jpg"></li>
<li><img src="sample2.jpg"></li>
<li><img src="sample3.jpg"></li>
<li><img src="sample4.jpg"></li>
<li><img src="sample5.jpg"></li>

</ul>

</div>

CSS

画像を差し替えるって所がポイントなので、メインの画像と同じサイズの画像をサムネイル画像にセットします。

どんなサイズでもいいんですが、


#imageList img { width:サムネイルの大きさ; height: サムネイルの大きさ; object-fit: cover;}

なんて感じで設定すると、比率が変わらず小さくなるので、便利かと思います。

javascript


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
    // 「imageList」内の「img」をマウスオーバーした場合
    $('#imageList img').hover(function(){
 
        // マウスオーバーしている画像をメインの画像に反映
        $('#mainImage img').attr('src', $(this).attr('src'));
 
    });
 
});
</script>

これで、サムネイル画像をマウスオーバーするとメイン画像が切り替わります。

Pocket