• MENU ●●●●
  • ページのトップに戻るスクロールボタンを取り付ける手順解説


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    スクロールボタンをシリウスに取り付ける手順

    記事を下方まで閲覧後トップに戻るスクロールボタンをクリックすると
    気持ちよく、柔らかくスムーズにサイト上部に移動するサイト構成は
    ワールドプレスやブログなどではよくお見かけ致しますが、シリウスでも
    デフォルト、レスポンシブ、1.5テンプレート各種で導入カスタマイズは
    可能です..........

     

     2016 0812更新 2018 0620再更新


     

    あまたのサイト群を拝見しますとサイト巻末にトップに戻るなんて画像
    メニューがございましたね

     

    あれれと思いクリックしたのですが瞬間移動のリンクでしたね

     

    この仕様は、現在の7シリウステンプレートに付属はしているのですが、
    なんか、いまいち...

     

    瞬間移動ではなくゆるりと上部にスクロールするなら?なんかいい感じですが
    アッという間の移動ではなんかいまいち??

     

    サポートでも、ここのところスクロールボタンは取り付けできないか?と
    なぜか5件も依頼がございましたので記事を追加します

     

    長文の記事など最後まで拝読する読者様への優しい気配りでしょうか?

     

    解説の4ステップでスクロールボタンの取り付けは出来ますので 
    興味があるならチャレンジしてください

     

    なにごとも経験です 

     

    手馴れればいろんなことに応用ができますよ
    頑張ってみましょう

     

    今回のスクロールボタンは当サイト右下にスクロールすると表示が
    確認いただけます

     

    作動を確認して、よろしければお取付ください
    尚、カラーや戻り位置 作動スピードは変更可能です

     


     

    前置き

     

    シリウスの第1.5追加ニューテンプレートに導入したのですが、ややレイアウトに
    不具合が確認できましたので回復措置完了...

     

    テンプレートの構造違いが影響しているのかと理解していたのですが、その後
    他テンプレートでも新規導入する際はエラー発症(レスポンシブTPでも)

     

    ですので、発症原因?はシリウスソフト...すみません、表現の間違いですね
    シリウスが進化したため、過去手法が追い付かない...でしょうか?

     

    ですので、過去バージョンCSSと現代CSSの二つを記載しておきますので、
    もし、レイアウトエラーでしたら、入れ替えてください...

     

    jqueryプラグイン 1.4.2/jquery.min.jsを使います

     

    説明記載以降の前置き

     

    jqueryプラグイン 1.4.2/jquery.min.jsをサーバーに入れると
    説明しておりますが、後々確認してみますと、
    いれなくとも記述のみでも正常に動いているのが
    なぜか、確認できております....?

     

    jqueryプラグインをダウンロード、サーバーアップの工程は省かれても
    よろしいかも知れません

     

    HTML追加コードには、1.4.2/jquery.min.jsが含まれていますね
    この行は、削除せずとも作動に影響は及ぼしません
    後々を考えて削除せずをご選択ください

     

    コードのみで動かずの場合のみ、jqueryプラグインをアップしてください

     

     

     

    こちらのサイトでダウンロード
    http://blog.jquery.com/2010/02/19/jquery-142-released/

     

    jquery/1.4.2/jquery.min.jsは
    以下の記述のものを選んでクリックしてください
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

     

     

    お探し物が見つからない場合

     

    以下リンクで 直接min.jsファイルをダウンロードできます
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

     

    注意事追記 W10利用の際 リンククリックでjquery.min.jsが
    何かしらのパソコン設定が影響してか ダウンロードされない....

     

    💻画面上でファイル内容の記述表示となることがございます

     

    そのままではダウンロード ファイルの取り込みができませんので

     

    マウスの右クリック操作で表示される一覧メニューより 

     

    名前を付けて保存を選択してダウンロードファイルに変換してください

     

    ..ファイルは解凍せずでOK...そのまま使えます

     

     

    ダウンロードしましたら シリウスの生成の次のアップロード画面で
    左ローカルより右サーバーへファイルをアップロードします

     

     

     

    MTMLテンプレートへの記述

     

    以下記述をhead内に貼り付けてください
    トップページMTMLのみですと、トップページのみでしか反映されません
    全てのページで反映する場合、カテゴリー エントリーともに
    リンク集HTMLまで記述を追加します

     

     

    長いですけどコピーはここからです

     

     

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!--backtotop-->
    <script type="text/javascript">
    $(function() {
    var topBtn = $('.backtotop');
    topBtn.hide();
    $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
    topBtn.fadeIn();
    } else {
    topBtn.fadeOut();
    }
    });
    });
    </script>

     

    <script type="text/javascript">
    $(function(){
    $('a[href^=#]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
    });
    });
    </script>
    <!--popup-->
    <script type="text/javascript">
    $(function() {
    $('a.popup').click(function(event){
    event.preventDefault();
    window.open(this.href,'_blank');
    return false;
    });
    });
    </script>
    <!--tooltip-->
    <script type="text/javascript">
    $(function() {
    var tooltip = $('<p></p>').appendTo($('body')).css({opacity: 0}).hide();

     

    $('ul#tooltip li').each(function() {
    var element = $(this);
    var text = element.attr('title');
    element.attr('title','');

     

    element.hover(function(e) {
    tooltip.stop()
    .text(text)
    .addClass('arrow_box')
    .css({
    position : 'absolute',
    left : e.pageX - 5,
    top : e.pageY + 30
    })
    .show()
    .animate({
    opacity: 0.9
    }, 1000);
    },function() {
    tooltip.stop()
    .animate({
    opacity: 0
    }, 1000, function(){
    tooltip.hide()
    });
    });

     

    element.mousemove(function(e){
    tooltip.css({
    position : 'absolute',
    left : e.pageX -5,
    top : e.pageY + 30
    });
    });

     

    });
    });
    </script>

     

     

    ここまで

     


     

    body内に表示指定

     

     

    つぎにMTML内の body内に表示される指定をします

     

    戻るボタンをポチした際、戻る地点に記述は置きます

     

    以下記述をコピーして貼り付けます 

    <div class="backtotop"><a href="#container">TOP</a></div>

     

    貼り付けは、トップ カテゴリー エントリーページHTML内に全てにです

     

    サイトマップで設置の必要がある際は、正常作動の確認を
    しておりますので可能です

     

    当サイトの場合の貼り付け例 位置をご確認ください

     

    <!-- ★メインコンテンツここから★ -->

     

    <div id="contents">
    <div id="threebox">
    <div id="main">

     

    <% freeSpace1 %>
    ここです
    <div class="backtotop"><a href="#container">TOP</a></div>

     

    <% if:siteMode(normal) %>

     

    <!-- ★▽通常モードここから▽★ -->

     

    <% textTitle1 %>
    ここまで

     

     

     

    自分サイトで戻り位置を確認後、もっと下の位置に変更したいなら
    置き場所をいくつか項目の下行へ置き換えてみてください

     


     

     

    スタイルシートへの記述

     

    メインスタイルシートを開いて、一番下でよいのでコピーして貼り付けて下さい..
    こちらの記述変更でカスタムが可能です...

     

    二つございますので上コードでレイアウトエラーなら下コードと入れ替えて
    ください...

     

    過去からのコード

    div.backtotop {
    position:fixed;
    bottom:20px;
    right:15px;
    z-index: 9000;
    }
    div.backtotop a {
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    padding:20px;
    color:#FFF;
    font-weight:bold;
    background-color:#333;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px; 
    }

     

    上コードでレイアウトがずれていたら以下をご使用ください..
    新コード

    div.backtotop {
    position:fixed;
    bottom:30px;
    right:15px;
    z-index: 9000;
    }
    div.backtotop a {
    display:block;
    width:40px;
    height:40px;
    line-height:40px;
    padding:20px;
    color:#FFF;
    font-weight:bold;
    background-color:#333; /*背景色を変える際はコード変更*/
    border-radius: 50px;

     

    -moz-border-radius: 50px;
    -webkit-border-radius: 50px; 
    }

     

     

     

    ここまでで作業は終了しました
    でも、プレビューの確認では、多分?クリックで瞬間移動です...

     

    滑らかに動くのは、パソコンのスクリプトを解除するか、アップロード以降
    の画面でとなります..

     

     

    カスタム関しては、然程面倒でもございませんので、ご自身で
    あれこれとお考えください...

     

    ご参考

     

    せっかくサイトに導入したロング記述ですがうっかりとテンプレートを変更など
    してしまうと記述が消滅してしまい...再設定となります..

     

    面倒を回避するためテンプレートのエクスポートを必ずしてください...

     

    また、他にサイトも所有しているなら忘れないうちに追加配置しときましょう...

     

    あれこれ

     

    今回のページ戻るボタンはカスタム可能でよいものです

     

    でも、他にもっとないかな?なんてお考えの方へ

     

    他にも20ほどのボタンを実装しようとしたのですが
    なぜか、シリウスにうまく適合するものがありません

     

    ボタンは表示されても瞬間移動してしまうとか?

     

    jQueryプラグインを入れた事やscriptが原因なのか?
    他の不具合が表れてしまうことも!

     

     

    追記

     

    もう一つ、簡単に取り付け可能なものを見つけました
    こちらでご覧ください

     

     

    今回のボタンはスピードも変化可能

     

    形も四角に変えられますね

     

    カラーも変更可能

     

    これだけできれば他のボタンを取り入れることもないでしょうから

     

    あれこれとお探しになるよりカスタムしちゃえと お考えになられては?

     

     

    探し求めることをおすすめしない もう一つの理由

     

    ネット上にはスクロールボタンについての解説はおおくございます

     

    HTMLやCSSに記述するコードはコピーできるよう備えてあるサイトも
    多くみられます

     

    正確か? 不正確かは判断できませんが

     

    しかし、肝心のjQueryプラグインの解説が抜けているんですね

     

    jQueryを実装してスクロ―ルボタンを取り付けよう.... 

     

    なんて言ってはいてもjQueryというだけで種別が解らないんですね

     

    jQueryの記述さえもないサイトを見かけます

     

    意味のないサイト群で無意味な情報求めても時間の浪費に
    なってしまいます

     


     

    最後になりますが、一部シリウスにあてはめの変更はございますが
    当解説の1.4.2/jquery採用に関しましては 
    .こちらのサイトを一部参考にさせていただきました
    うえびろぐさま

     

    ありがとうございます

     

    ご参考下さい
    http://webbeginnerslog.com/jquery/back-to-top-button/

     

    スポンサーリンク

     

     

    ページのトップに戻るスクロールボタンを取り付ける手順解説記事一覧

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

    サイト左にスクロールボタンを取り付ける解説です。シリウスデフォルトでは正常に反映確認出来ましたがビジネステンプレートではなんか、意味不明??親ページではjqueryプラグイン 1.4.2/jquery.min.jsを使いましたがここではjqueryプラグイン 1.4.3/jquery.min.Js対...

    ≫続きを読む

     

    シリウスぺージラストへスクロースするボタン取り付カスタマイズ方法

    2014 1218...2017 0821更新シリウス外部カスタマイズテーマ P巻末へスクロールするボタンテキスト前置き...デフォルトTP対応シリウス通常サイトでは正常作動しますが、ブログ仕様に切り替えた場合は指定位置が異なり不作動となります。ブログ対応については追記は致しません..エントリーメニ...

    ≫続きを読む

     

    記事リンクをクリックで下記事へスクロールするシリウスカスタマイズ

    2015 0112...2017 0825更新シリウス外部カスタマイズ 途中記事をぶっ飛んで目的地へ着陸ここの2行はページ戻る指定のテスト位置例です…無視してくださいシリウスカスタム3逆設定着地点今回の解説はjqueryを必要としますこちらのサイトのステップアップカスタマイズとなりますので詳細をご確...

    ≫続きを読む

     

     

    トップに戻るスクロールボタンを取り付ける手順解説

     

    シリウスカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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