• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ
    たまに知的好奇心をそそる記事も。





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

    コメントを投稿

    ANTENA RSS

    ARCHIVE

    LINK





    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    PAGE TOP