スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページ内をスムーズに移動する超軽量スクリプト

ページ内をスムーズに移動するスクリプトはいくつもありますが、個人的にはこれが一番軽くて簡単なのかなと思います。以前使っていたのですがあらためて使うと便利だったので紹介します。
smoothpack.png

実際の動作はこちらをご確認ください。

では、設置方法を説明します。

まず、「smooth.pack.js」を下のサイトからダウンロードします。5.66KBしかなくて動作も非常に軽いです。

smooth.pack.jsをサーバーにアップして読み込みます。

js
<script type="text/javascript" src="smooth.pack.js"></script>

次に、移動するためのリンクと移動先の設定です。

html
<a name="top" href="#footer">下に移動</a>


  [コンテンツ]


<a href="#footer">下に移動</a>


  [コンテンツ]


<a name="footer" href="#top">上に移動</a>

リンク先を#footerに設定すると「name="footer"」と書かれたリンクまで移動するという感じになります。

この例の場合、上2つのリンクは一番下のリンクまで、一番下のリンクは一番上のリンクまで移動します。

smoothpackCode.png

難点といえば、リンクがあるところにしか移動できない点でしょうか。

ページの量が多くなったときの目次など様々な場面でに使えそうです。

name属性はweb標準ではない

ところで、リンクでのname属性はweb標準ではありません。ただ、このままでも問題なく動きます。

将来的なことも考えてweb標準に則りたいという場合は、nameの代わりにidを使います。

html
<a id="top" href="#footer">下に移動</a>

で、smooth.pack.jsも変更する必要があるのですが、元々短いコードですし、変更するところは1ヵ所ですので問題ないと思います。

js
(1E9.name==l;i=setILL+(9)+)
という部分を
js
(1E9.id==l;i=setILL+(9)+)

と変更するだけです。

主要ブラウザは一通り動作確認済みです。IE6でも大丈夫です。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
コメントする場所を間違えてしまいました(汗
上のコメントは削除したつもりですが、
削除になっていないようでしたら削除していただけないでしょうか?

はじめまして、こんばんは。当記事を拝見させていただき、早速試してみました。

結果を申しますと、一応動作はしたのですが、当方がイメージしていたようには動かなく、
ぐぐって調べてはみたのですが、どうも解決に導くことができませんでした。

その問題と申しますのが、各記事においての動作ではなく、
トップページ上で複数記事がある状態でこの動作をさせたいというものでした。

ちなみに使用したい機能としましては、トップに移動は使わず、
下に移動を使って記事のフッター部分に移動という形をとらせたいのです。

当方なりに考えた結論は、複数記事がある状態では
できないのではないのかなということでした。

問題の状態でそのままにしていますので、
よろしければ当方のブログで現状を見ていただければ分かりやすいかなと。
(記事の日付右側にある▼ボタンになります)

いきなり長々とコメント書いてしまいましてすみませんでした。
アドバイスいただけましたら幸いです。
【2012/10/03 20:58】 | 丸々 #- | [edit]
はじめまして

お問い合わせの件ですが、
記事の繰り返しになるページでは

<a name = "smooth"></a>



<a href = "#smooth">▼</a>

がたくさん出てきて、どこをクリックしても最初の
<a name = "smooth"></a>に移動してしまうと思います。

それぞれ違う名前にしないといけないと思うのですが
ちょっといい方法が思いつきませんでした。

お役に立てず申し訳ございませんが
よろしくお願いいたします。
【2012/10/06 07:10】 | 管理人 #E2ywrYdA | [edit]
ご返答いただきありがとうございます。

やはり記事が複数ある状態ですとそうなってしまいますよね・・・

ページトップにいくというカスタマイズはよく見かけるのですが、
記事が長くなってしまった場合にその記事の下にまで
飛べたら良いのになと思い、カスタマイズを探しておりました。

自分の意図とはマッチしませんが、長くなってしまった記事に対しては
折りたたみで対処するのが無難な対処方法なのかもしれませんね。

大変助かりました。ありがとうございましたm(_ _)m
【2012/10/06 17:09】 | 丸々 #- | [edit]
収益を作る会社を見つけたとき、あなたは正しい軌道
【2013/12/02 18:39】 | シャネル バッグ コピー #s7wrz8KY | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。