[JS]テキストリンクのリストをアニメーションでスクロールさせるスクリプト

jQueryを使用して、リスト要素で実装したテキストリンクを指定した範囲内だけでスクロールさせるスクリプトを紹介します。

The MoveUp Menu
デモページ

[ad#ad-2]

テキストリンクのリストはマウスを上下に移動すると、ものすごい勢いでスクロールします。
デモではマウス操作だけでは難しいため、キーボードの矢印キーの操作にも対応しています。

実装

実装はHTML, CSSともに最小限の形で実装されています。

HTML

<div id="menu">
	<ul>
		<li><a href="#">Nature</a></li>
		<li><a href="#">Receivability</a></li>
		<li><a href="#">Alone time</a></li>

	/ul>
</div>

CSS

リストの可視範囲（高さ）を指定します。表示されないリストはスクリプトで表示します。

#menu {
  height: 360px;
  overflow: auto;
}

#menu ul {
  list-style: none;
}

#menu a {
  text-decoration: none;
  display: block;
  color: black;
}

JavaScript

スクリプトはjquery.jsを外部ファイルとし、以下のスクリプトを記述します。

$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");

var $el,
    speed = 13.5,    // needs to be manually tinkered with
    items = $("#menu a");
items
.each(function(i) {
        $(this).attr("data-pos", i);
})
.hover(function() {
        $el = $(this);
        $el.addClass("hover");  
        $("#mover").css("top", -($el.data("pos") * speed - 40));
        // 40 is the top padding for the fadeout
}, function() {
        $(this).removeClass("hover");
});

[ad#ad-2]

拡張

Chromeでのキャプチャ

Webkit系ブラウザ（Chrome, Safari）では、次第に薄れていくエフェクトを見ることができます。これは、:before, :afterを使用します。

CSS

#menu:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 2;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,100)),color-stop(1, rgba(255,255,255,0)));
}

#menu:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 2;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,100))); }

現在のスピードでは気持ちよくスクロールしますが、正確に一つのテキストリンクを選択することが難しいです。そのため、キーボードでの操作を加えました。
下記のスクリプトで実装します。

JavaScript

$(document).keydown(function(event) {
        cur = $(".hover").attr("data-pos");

        // Down arrow
        if (event.keyCode == 40) {
                $("[data-pos=" + cur + "]").trigger("mouseleave");
                if (cur != max) { cur++; }
                $("[data-pos=" + cur + "]").trigger("mouseenter");
        }

        // Up arrow
        if (event.keyCode == 38) {
                $("[data-pos=" + cur + "]").trigger("mouseleave");
                if (cur > 0) { cur--; }
                $("[data-pos=" + cur + "]").trigger("mouseenter");
        }
});