忍者ブログ
ADMINEDITRES

果報は寝て待て(-_☆)


果報を寝て待ってはいるのですが・・・
01月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
      

TOPへの戻り方

    
以前、ドコかで見かけた小技。
TOPへ戻る時に、スクロールして戻るかのように見せてくれるスクリプト。

いざやってみようって思ったら、ドコで見かけたんだかわからなくなって・・・。
「自力でスクリプト書けないし~(´・ω・`)」と諦めかけていたのですが、なんとニンブロラボ.さん経由でスクリプトをGetすることに成功しました( ̄ー ̄+

javascriptの使用ができるトコならカップ麺が出来上がる前に作業完了できます(?)

参考サイト:
ニンブロラボ. ページトップへスクロールさせる
スクリプトはコチラにあります↓
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E

ちなみに元ネタはコチラな模様・・・(英語です)
wg:A (slightly) better technique for "Back to Top" links.

S i M P L E * S i M P L E - Smart Designs by 100SHIKI.COMさんトコにスクリプトも設置方法も載せてありますので、そちらを参照していただければいいかと思います。

・・・が、一応ってカンジでいつも通り『作業メモ』として私の設置した方法を続きに載せています。
スクリプトも置いてますので、よかったらどうぞご覧ください(゚ー゚;)
以下のスクリプトを埋め込みます。

ドコでも構わないようですが、私はbody内で一番上に置いてみました。
<script type="text/javascript" language="JavaScript">
<!--
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}
//-->
</script>



でもって、TOPへのリンクは以下のようになります。
<a href="#" onclick="backToTop(); return false">TOP</a>


しかしながら、なんかTOPへ戻る時の動作がウチで見るとギコチなく見えるのは私ダケでしょうか?(・∀・;)
BlogPetとか、載せてるモノの具合なのかなぁ?
PR
  << prev entry     | HOME |     next entry >>     
+++ この記事へのコメント +++
 
name
title
color
mail
URL
comment

ご利用のブラウザ、設定ではご利用になれません。
password Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret?  ※チェックすると管理者へのみの表示となります。
 
ちゃんとするするしてる
ちゃんと動作してると思います
これもいいですよね
kisato URL 2006/10/05(Thu)20:06:19
EDITRES
Re:ちゃんとするするしてる
>ちゃんと動作してると思います
>これもいいですよね

kisatoさんも設置されたんですね?( ̄ー ̄+
毎度のTB、ありがとうゴザイマス☆
コチラからも後ほどうかがいますね♪
[ 2006/10/05 23:05 ]
おもしろいですね♪
Pavさん、おはよーございまっす♪
おお!ほんとだ!スクロールしますね♪おもしろい小技ですね(*^-^)
なんにせよ、色々なスクリプトに触れていけば、
わかってくるようになりますもんね。いい勉強法だと思いますよ。習うより慣れろですからね。(*^-゚)vィェィ♪
yozo URL 2006/10/05(Thu)09:29:14
EDITRES
Re:おもしろいですね♪
yozoさん、こんにちわ♪(゚▽゚*)

>おお!ほんとだ!スクロールしますね♪おもしろい小技ですね(*^-^)

見つけた時はカンゲキでした。
検索するのもスクリプト考えるのもメンドくさいって思ってたんで(爆)

>なんにせよ、色々なスクリプトに触れていけば、
>わかってくるようになりますもんね。いい勉強法だと思いますよ。
>習うより慣れろですからね。(*^-゚)vィェィ♪

中身が理解できると、イロイロと応用が利いてぐっとカスタマイズにも幅がきくようになると思うんですよね。
イロイロ使っていくウチに多少でもわかるようになれればいいのですが・・・。
[ 2006/10/05 14:36 ]
+++ この記事へのトラックバック +++
この記事にトラックバックする:
Bosotto 200Xこのページの先頭へ
よくHPやブログで、「このページの先頭へ」とか「Back to Top」とか見かけるが、クリックすると瞬時にトップへ移動してしまい、どこにいったのか一瞬混乱してしまうことはないだろうか。これは移動するまでの過程がデジタル的に飛んでしまうためである。そんな過程をアナログ的に見せてくれる素敵な小技(Javascript)を見つけ、早速実装してみた。試しにエントリーの下の方にある「TOP」を押してみて欲しい。現在いる場所からスルスル〜と上に心地よくのぼっていく様子が分かると思う。
【Bosotto 200X】URL 2006/12/01(Fri)18:01:27
kisatonomori blogページトップ画面へ スクロール&  コメントURL - favicon 表示
またまたおもしろい機能を紹介してくれました ▼参考はこちらより やり方が書かれています ▼元ネタはここだそうです ここのサイトの右下に常に出ている | back to top↑| ここをクリックすると突然トップ画像に戻るのではなく、 戻っていく場面が見えながらトップへ戻ります。 おもしろいですね~ トップ画像貼ってる所のクリックは今まで通りに戻り この| back to top↑| をクリックした時だけスルル~ッと戻る形にしてみました とりあえ...
【kisatonomori blog】URL 2006/10/05(Thu)18:43:24
Search in BLOG
CATEGORIES
ARCHIVE

RECENT COMMENTS
RECENT TRACKBACKS
TRACKBACK PEOPLE
Pavloba ? ! ? !


すぐにサボって寝てしまうので、時々構って下さい。
鼻を触ると喜びます?
MailForm
    
+++ Powered By 忍者ブログ +++
Copyright © 果報は寝て待て + Template Design BY © Pavloba
+++ 忍者ブログ + [PR]
+++