はじめに

スクロールしたときにふわっと浮き上がるメニューと、リンクをクリックした際にそこにスクロールするスクリプトの備忘録

1. 【DEMO】

スクロールしたら浮き上がるメニュー

まずはスクロールしたら浮き上がるメニューを設定する。jqueryを使って、以下の様なスクリプトを書く。

$(function() {
	    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#page-menu').fadeIn();
        } else {
            $('#page-menu').fadeOut();
        }
		});
});

スクロールの位置を scrollTopでスクロール値を取得し、100以上になったら #page-menu をフェードイン。それ以外ならフェードアウトするようにしています。スクロールは頻繁に行われるイベントなので、$(window).scroll() を使って、スクロールが行われる度にスクロール位置を取得しています。

内部リンクをクリックしたらスクロールして移動する

内部リンクをクリックした際、普通の内部リンクだと一瞬で移動するため、どこにいるのか分かりづらいため、スクロールすることでどこに移動したのかを明示的にします。そのスクリプトは以下になります。

$(function() {
   $('a[href^="#"]').click(function() {
      var speed = 400;
      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;
   });
});

注意点は、a[href^="#"] 。＃にダブルクォーテーションが付かないとどうやら動いてくれないらしい。参考にした解説サイトではa[href^=#] となっていたので少しはまった。どうやら古いjqueryだとそれでもよかったみたいだ。

PCとタブレット向けにこういったことが仕事上必要だったけれども、スマホだと横にメニューを出すということはモバイルフレンドリー的によくないというか、幅があるブラウザでない限りは正直使えない。