【HTML/CSS/Javascript】 旧・スムーズにページ内をスクロールさせてみた

, , No Comments
aタグでただ飛ばすだけでは面白くないよね・・・と思いとりあえず調べてとりあえず自分のブログに設置してみました(`・ω・´)

サンプルページも作ってみたのでどんな感じになってるのか見てってね(`・ω・´)
サンプルページ
記事内でも簡単に設定できるのでかなりお手軽です(。・ω・)
サンプルページを用意しといてアレなんですがこんな感じに・・・

下までスクロール

上までスクロール
それでは早速設置の仕方ですが、FC2の場合テンプレートの設定からHTMLの~の間に以下のjavascriptを設置してあげます。

<script?type="text/javascript"?src="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/20140611194712c3f.js"></script>
<script?type="text/javascript">
? ?$(function(){
? ??$("a[href^=#]").click(function() {
? ? ?var myHref= $(this).attr("href");
? ? ?var myPos = $(myHref).offset().top;
? ? ?$("html,body").animate({scrollTop : myPos}, 1200);
? ? ?return false;
? ??});
? ?});
??</script>

aタグでスムーズにページ内を移動できるようにしてます。
後はページ内をスムーズに移動させるための場所を指定してあげるために次の使い方を行います。
クリックする場所に
表示させたい文字を入力

移動させたい目的地に

の部分は同じアルファベットを入力して下さい。
これが違ってるとクリックしてもスクロールしてくれません。
は数字やアンダーバー等が入ってても構いません。 ">表示させたい文字
の場合だと
scroll_1
">
ってな感じです(。・ω・)

どうですか?
かなり簡単なのでちょっとだけ自ブログを進化させたい方にはとてもお手頃かと思います(`・ω・´)
なお、しっかりバックアップなり復元できるようにしてからテンプレート弄ってね!
全て自己責任でお願いしますよ(*´σー`)
サンプルページの画像は管理人の趣味です(ゲス顔)

サンプルページは通常に動きますが現在当ブログのスムーズスクロールはより軽量化したものを使用しているため、この記事で設定されているスクロールは機能しておりません。
また軽量化したスムーズスクロールも暇を見て更新しようと思います。

0 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

top