POPSブログ

JavaScriptでページスクロール

57

  Category:  javascript2012/03/19 pops 

ページの先頭に戻る「GOTO-TOP」に使用する、JavaScriptのsmooth_scroll_top.jsについてである。


JavaScriptでページスクロール


smooth_scroll_top.js

何処ででも見かける、ページの先頭に戻る GOTO-TOP であるが、jQueryででも実現できるがその時の状況ではJavaScriptで書かれたものがほしい時がある。
以前4,5年前 youmos.com と言うところで smooth_scroll_top.js なるものを手に入れたことがあった。その時点でサイトの更新が停止していたし、現在はサイトが無いようだ。結構使い勝手が良いし今後も使用したいので、ここにメモしておく。


smooth_scroll_top.js、JS側を開き、2箇所を修正する。
window.setTimeout("doBackScroll()", 35);、でスクロールの速度を調整。

getElementById('gotop')、で GOTO-TOP の ID を記入するだけである。


HTMLでGOTO-TOP部分を記載する。


<div id="gotop">GOTO-TOP</div>

smooth_scroll_top.js


// BackScrollイベント処理
function doBackScroll() {
    var pos = getScrollPosition();
    window.scrollTo(Math.max(Math.floor(pos.x / 2),0), Math.max(Math.floor(pos.y - (pos.y / 5)),0));
    if (pos.x > 0 || pos.y > 0) {
        window.setTimeout("doBackScroll()", 35);
        return false;
    }
}

// スクロール量を取得し、オブジェクトとして返す
function getScrollPosition() {
    var obj = new Object();
    obj.x = document.body.scrollLeft || document.documentElement.scrollLeft;
    obj.y = document.body.scrollTop || document.documentElement.scrollTop;
    return obj;
}

// イベントリスナー登録
function addListener(elem, eventType, funcRef, capture) {
    if(!elem) { return false; }

    if(elem.addEventListener) {
        elem.addEventListener(eventType, funcRef, capture);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, funcRef);
    } else {
        return false;
    }
    return true;
}

// WindowLoad時の処理
function addLoadListener(e) {
    addListener(document.getElementById('gotop'), 'click', doBackScroll, false);
}

// WindowLoadのイベントリスナーをセット
addListener(window, 'load', addLoadListener, false);

結構使用頻度の高いものである。勝手にダウンロードは、こちら> [smooth_scroll_top.js]



jQueryで書く場合

簡単である。次のように記述して読み込めばよい。これでOKだ、確認済み 2012/03/19/


$(function () {
	$('#gototop').click(function () {
		$('html,body').animate({scrollTop:0},600);
		return false;
	});
});

【参考ページ】dayflower: jQueryでページスクロール


私が今ここで使っているもの

FLASH表示と併用すると、どうしてもJSの動作が鈍くなる、最近はFLASHが重くなりがちで困る、よってJSも使用できずに GOTO-TOP も簡単なHTMLスタイルで在る。
最終的に、javascript:scroll()、を挿入している。


HTMLスタイルならば

<a href="#">GOTO-TOP</a>

であるが、#が入ると困る場合がある

javascriptスタイルならば

<a href="javascript:scroll(0,0)">GOTO-TOP</a>

または

<a href="javascript:scroll()">GOTO-TOP</a>

である

なんとなく笑える話である。



[ この記事のURL ]


タグ:jquery , javascript , memo

 

ブログ記事一覧

年別アーカイブ一覧



[1]