スマホのトップページの先頭へ戻るボタン

Question

大変お世話になります。

スマホのトップページですが、
ある程度下へタップしていった時、
右下へ、トップページの先頭に戻るボタンを表示させたいのですが、
方法が分からない状況になります。

※画像の添付をさせていただきました。
※スマホのトップページは、まるごとスマホで作成をしております。

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

＞スマホのトップページですが、
＞ある程度下へタップしていった時、
＞右下へ、トップページの先頭に戻るボタンを表示させたいのですが、
＞方法が分からない状況になります。

最初に、「HTML直接入力」ブロックを用いて、
下記HTMLを挿入してください。

===== この下の行から ============

.spButtonToTop img{
display: block;
position: fixed;
bottom: 画面下端からの距離px;
right: 画面右端からの距離px;
z-index: 999;
width: 画像の横幅px;
height: 画像の縦幅px;
}




===== この上の行まで ============
※各距離・幅は実際の数値を、ボタン用画像URLは実際のURLに
　置き換えてご利用ください。

これだけですと、常に「先頭に戻る」ボタンが表示されますが、
http://www.webopixel.net/javascript/538.html
上記URLで紹介されている方法を利用して、
下記タグを挿入していただくと、
スクロールに応じて表示・非表示を切り替えることができます。

===== この下の行から ================

$(function() {
    var topBtn = $('.spButtonToTop img');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

===== この上の行まで ================

Answer

大変お世話になります。

ご連絡ありがとうございます。
表示ができました。

大変ありがとうございました。

また、申し訳ございませんが、
もう1点ご質問がございます。

表示をさせた画像を透明化する方法はございますでしょうか。

画像の形式を変更して登録をしてみましたが、
透明化の方法が分からない状況になります。

どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

＞表示をさせた画像を透明化する方法はございますでしょうか。
スタイルシートに「opacity」という、透明度を指定する属性がありますので、
この属性を、画像に対する規則の中に加えてください。

具体的には、最初にご案内したHTMLの
.spButtonToTop img{
と
}
の間に、例えば

opacity: 0.7;

という一行を加えてください。

数字を調整することで透明度を変更することができますので、
0（完全に透明）〜1（完全に不透明）の間で調整をお願いします。

Answer

大変お世話になります。

ご連絡大変ありがとうございます。
透明度の調整ができるようになりました。

大変ありがとうございました。

また、申し訳ございませんが、
昨日ご案内していただきました、
スクロールに応じて表示・非表示の切りかえの部分ですが、
常に表示がされてしまう状況になります。

下記がまるごとスマホの直接ブロックに入れております、
scriptになります。

================================

 $(function() {
 var topBtn = $('.spButtonToTop img'); 
 topBtn.hide();
 //スクロールが100に達したらボタン表示
$(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 topBtn.fadeIn();
 } else {
 topBtn.fadeOut();
 }
 });
 //スクロールしてトップ
topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
 });
 
================================

※5と7行名の100の数字を変更すればと思ったのですが、
そうでもないようです。

大変お手数になりますが、
どうぞよろしくお願いたします。

Answer

ECマスターズの田中です。

失礼いたしました。
私がご案内したタグの内容を実行するために必要なファイルが、
ページの末尾に設置されていたために見つからず、
実行エラーを起こしておりました。

お手数ですが、入れていただいたタグの前に、



というタグを入れていただけますでしょうか。
（※●●●は、ショップURLに書き換えてご利用ください）

Answer

大変お世話になります。

表示がされるようになりました。
大変ありがとうございます。