TELOG. Powered by Blogger.
🔖アニメ感想リスト |🔖ゲーム記事リスト

2014年6月15日日曜日


旬な深夜アニメ感想
ゲーム攻略日記
ユーチューバーについて思うことを 綴った趣味ブログ

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

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 件のコメント:
コメントを投稿



※コメント反映までに時間がかかる場合があります。



この記事を書いたりまとめた人
ʑ̸̀੭ੇㄝ゛੭ੇ

アドブロ推奨してます♪ アドブロ推奨してる管理人のTwitterアカウント
いつも多くの方々に訪問していただきありがとうございます( ◜◒◝ )更新の励みになってます((´^ω^)) 当ブログへのご意見やお問い合わせ・ネタ投稿などは《こちら》からご連絡いただけます。

関連記事
五十音順アニメ感想リスト

うずらインフォ 引用リンク

ARCHIVE

日本のネットスラングは正しく翻訳されません。:(


黒い砂漠:©Pearl Abyss Corp. All Rights Reserved. ©GameOn Co., Ltd. All Rights Reserved.