• MENU●●●●
  • ページトップにスクロールするボタン1.4.3/jquery採用


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    サイト左にスクロールボタン配置

    サイト左にスクロールボタンを取り付ける解説です。

     

    シリウスデフォルトでは正常に反映確認出来ましたが
    ビジネステンプレートではなんか、意味不明??

     

    親ページではjqueryプラグイン 1.4.2/jquery.min.jsを使いましたが
    ここではjqueryプラグイン 1.4.3/jquery.min.Js対象となります。

     

    以下のスタイルを確認してください..
    ボタン画像はing画像で、できていますのでシリウス画像で編集可能です..

     

    ここで注意ごとです

     

    アップロード後はボタン内に白矢印マークが確認できますが..

     

    プレビューでの確認は以下反映不足..画面ではアップ正常反映となります。

    シリウスデータにもscriptファイルを入れ込めば正常反映するのですが、
    2度手間なので説明はパス...

     

     

    動きは1.4.2とほぼ同様です

     

    取り付け手順は1.4.2と同様ですが、記述が異なりますので
    以下を参考に貼り付けてください

     

    参考サイトはこちら...DEMOで作動確認願います
    サイト内にダウンロードとありますが、なんか解説が不明ですので
    ダウンロードしないでください
    http://webdesignerwall.com/tutorials/animated-scroll-to-top

     

     

    色々試したのですが
    jquery-1.4.3.min.jsのダウンロードはこちらが良いです
    http://sourceforge.jp/projects/sfnet_jkashbey/downloads/js/jquery-1.4.3.min.js/
    シリウスにアップロードしといてください

     


     

    head内に張り付け記述

     

     

     

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    ;</script>

     

    <script>
    $(document).ready(function(){
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
    } else {
    $('#back-top').stop().fadeOut();
    }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function () {
    $('body,html').animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });
    });
    </script>

     


     

    body内貼り付けコード

     

    <p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
    </p>

     


     

    ボタン画像を入れる場合は以下の
    <span></span>を削除して画像コードに入れ替えてください

     

     

    スタイルシートを開いて最下部に以下記述を貼り付けします

     

     

    #back-top {
    position: fixed;
    bottom: 30px;
    margin-left -150px;
    }

     

    #back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;

     

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    }
    #back-top a:hover {
    color: #000;
    }

     

    /* arrow icon (span tag) */
    #back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrow.png) no-repeat center center;

     

    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

     

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    }
    #back-top a:hover span {
    background-color: #777;
    }

     

     

    ここまでで完了です

     

     


     

    ご報告

     

    参考サイトの記述はシリウスにすべてが当てはまらず...
    正常作動するため改行しております..

     

    障害

     

    ボタン画像の位置を変更しようと
    CSSで margin-left -150px;の記述をright に替えたところ

     

    サイト内(に記事台紙)入ってしまいました...

     

    記述を元に戻しても戻らず...あれこれと

     

    PCオフ 再起動で回復

     

    スクロールボタンて簡単なようですが、ミスするとサイト内に与える影響度は
    大きいですね

     

    スクロールボタン取り付けのちょっとした手違いで...カスタムサイトが
    レイアウト崩れ 

     

    巡り合いたくない障害に巻き込まれるんですね

     

    不具合での面倒を避けるために..
    ウェブ初心者の方はボタン、画像を入れ替える程度にして
    当サイト提供の記述は意味を理解するまでいじらないほうが
    良いかもしれません...

     

    スポンサーリンク

     

     

     

    ページトップにスクロールするボタン1.4.3/jquery採用
    ページのトップに戻るスクロールボタンを取り付ける手順解説
    シリウスカスタマイズ

    ページトップにスクロールするボタン1.4.3/jquery採用関連解説
    シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法
    SIRIUS.シリウスカスタマイズ サイトの記事欄上部から サイト巻末まで逆スクロールするテキストボタン取り付けのカスタマイズで エントリーメニューへすぐ到達できます
    記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ
    シリウスの記事上部の案内メニューか記事内リンクをクリックすると 中段または下段の指定箇所へ自動スクロールするカスタマイズ設定の解説です

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト