jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション
最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。
ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。
Sponsored Link
1.ちょっとスクロールしたら「トップへ戻るボタン」を表示
ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。
ボタンは下の方にこんな感じで配置します。
html
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
fixedにすると固定配置されます。
css
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
「100」というのが出現位置になるので適当に変更してください。
javascript
$(function() {
var topBtn = $('#page-top');
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;
});
});
スライドアニメーションして表示
先ほどの「トップへ戻るボタン」を下からにょきっとアニメーションして表示したらかっこいいかもしれない。
javascript
$(function() {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
4、10、15行目の数値はボタンの配置場所によって変更してください。
2.スクロールするとヘッダーに固定表示（アニメーションバージョン）
jQueryでスクロールすると上部に固定されるナビゲーションというのを作ったとき、ドロップダウンしたら実用的かもというご意見をいただきましたのでやってみました。
html
<div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div>
css
.nav {
padding: 0 20px;
margin: 0 auto 60px;
width: 760px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
javascript
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+500;
//ナビゲーションの高さ（シャドウの分だけ足してます）
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
4行目の表示位置はアニメーションするのでちょっと余裕をもたせて下の方で表示するようにしています。
ムダなところがけっこうあるかもしれません。
3.下部までスクロールすると横からスライドして表示
一番下までスクロールすると横からスライドで表示するやつです。
関連コンテンツやCTAを表示すれば目立つので認識しやすいかもしれませんね。
html
<div id="footer"> <div id="slide"> <div id="slide-in"> <h3>Footer</h3> <p>フッターコンテンツ</p> <p id="close"><a>閉じる</a></p> </div> </div> </div>
css
#footer {
overflow: hidden;
position: fixed;
width: 100%;
bottom: 0;
}
#slide {
background: #555;
color: #fff;
width: 100%;
}
#slide-in {
padding: 20px;
}
#footer a {
color: #fff;
text-decoration: none;
cursor: pointer;
}
javascript
$(function() {
var winWidth = $('body').outerWidth(true);
var footer = $('#footer');
var slide = $('#slide');
//画面下位置を取得
var bottomPos = $(document).height() - $(window).height() -500;
var showFlug = false;
// ウィンドウより小さかったら開く
panelOpen();
//slideを画面右外へ配置
$('#slide').css('margin-left', winWidth+'px');
$(window).scroll(function () {
panelOpen();
});
//閉じるボタン
$('#close').click(function(){
footer.hide();
});
//ウィンドウリサイズしたらwidth変更
$(window).resize(function(){
winWidth = $('body').outerWidth(true);
bottomPos = $(document).height() - $(window).height() - 500;
});
function panelOpen() {
if ($(this).scrollTop() >= bottomPos) {
if (showFlug == false) {
showFlug = true;
slide.stop().animate({'marginLeft' : '0px'}, 200);
}
} else {
if (showFlug) {
showFlug = false;
slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);
}
}
}
});
表示位置ですが、scrollTopはウィンドウ上部の位置なので「$(document).height() 」（ドキュメントの高さ）だけだと足りませんね。
「$(document).height() – $(window).height()」（ドキュメントの高さ – ウィンドウの高さ）画面下ぴったりの位置で表示することができます。
ここでは画面下よりちょっと上で表示したかったので「-500」しています。
下部までスクロールすると右下に配置したコンテンツが開く
最近こういうのも見ますよね。
あれはプラグインかなにかなのでしょうか。
ということでやってみます。
開くボタンは画像で配置しています。
html
<div id="slide"> <div id="slide-in"> <div id="open-btn"><img src="img/open-btn.gif" width="20" height="20" /></div> <h3>開くかも</h3> <div id="slide-contents"> <p>これは開くかもしれない。開きましたか？</p> </div> </div> </div>
閉じるボタンはcssでバックグラウンドに配置しています。
css
#slide {
position: fixed;
width: 200px;
height: 30px;
bottom: 0;
right: 0;
color: #666;
background: #fff;
border-left: solid 1px #999;
border-top: solid 1px #999;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
#slide-in {
padding: 5px 10px;
}
#slide a {
text-decoration: none;
cursor: pointer;
}
#slide h3 {
margin-bottom: 10px;
}
#slide #open-btn {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
cursor: pointer;
background: url(img/close-btn.gif);
}
javascript
$(function() {
var slide = $('#slide');
var contents = $('#slide-contents');
//開くボタン
var openBtn = $('#open-btn img');
var btnOpenFlag = false;
var openFlag = false;
var panelSwitch = function() {
//閉じる
if (openFlag == true ) {
slide.stop().animate({'width' : '200px','height' : '30px'}, 500);
openBtn.show(); //開くボタンにする
}
//開く
else if (openFlag == false) {
slide.stop().animate({'width' : '400px','height' : '200px'}, 500);
openBtn.hide(); //閉じるボタンにする
}
};
//開くボタンクリックしたら
$('#open-btn').click(function(){
panelSwitch();
openFlag = !openFlag;
btnOpenFlag = true;
});
//画面下位置を取得
var bottomPos = $(document).height() - $(window).height() - 500;
$(window).scroll(function () {
if (!btnOpenFlag) {
if ($(this).scrollTop() >= bottomPos) {
if (openFlag == false) {
panelSwitch();
openFlag = true;
}
} else {
if (openFlag) {
panelSwitch();
openFlag = false;
}
}
}
});
});
どれも似たようなものばかりでちょっと退屈だったかもしれませんが以上です。
COMMENTS
九龍デジロウ 2012-05-29 21:29
これはどのブラウザ限定ですか？
googlechromeではデモが期待された表示がなされいないようです。
私だけなのでしょうか。
webOpixel 2012-05-30 09:27
Chromeでは基本的に動くはずでなんですけど、なんででしょう。
すべてのデモが動きませんか？
nobody 2012-09-12 17:28
物凄くどうでもいいことなのですが、旗を意味するフラグはflugではなくflagです
http://en.wikipedia.org/wiki/Flag_%28computing%29
webOpixel 2012-09-13 14:13
ご指摘ありがとうございます。
これは恥ずかしいですね。
れな 2012-10-03 03:35
はじめまして、れなと申します。
とても素敵なスクリプトだったのでさっそく取り入れさせていただきました。
わかりやすい解説でしたので、JavaScript初心者のわたしでも簡単に出来ました。
なんだかflashで作ったかのようなわくわく要素が増えて嬉しいです。
jQueryが面白くて色々やってみてるので参考になりました。
ありがとうございます。
webOpixel 2012-10-04 14:13
れなさん。コメントありがとうございます。
jQueryは短いコードでもいろいろと出来てしまうのが面白いですね。
pb 2012-12-05 15:28
お世話になります。
【ちょっとスクロールしたら「トップへ戻るボタン」を表示】を利用させて頂いているのですが
「Mediabox」というLightboxのようなJSを入れたら動かなくなってしまいました。
現在、mediabox消すと動作します。
両方使えるようなこの問題の解消法とかはありますか？
webOpixel 2012-12-06 14:52
「Mediabox」は「mootools」というライブラリを使用しているようです。
LightboxはjQueryを使用したものも結構ありますので、基本的にはjQueryのものをお勧めします。
どうしてもという場合は、下記記事の一番下のソースを参考に修正してみてください。
http://www.webopixel.net/wordpress/108.html
pb 2012-12-07 15:24
ご回答ありがとうございます。
（LightboxはjQueryのLightboxを使ってたのですが、htmlを同様に表示したくて
Mediaboxというものを追加していました。）
jQueryのものを探してみます。ソース修正の対処法もありがとうございます。
ありがとうございました！
zun 2012-12-22 13:32
初心者でも使えました！
最初は動きませんでしたが、自分の凡ミスでしたｗ
ありがとうございました!!
pine 2013-01-24 17:40
大変わかりやすく、とても助かりました。
ありがとうございます！
ひとつ甘えてお助けいただきたいのは、
トップへ戻る際の速度調節や、溜め（一瞬ゆっくりから速度が上がるイメージ？）の調節などはどのようにしたらできますでしょうか？
webOpixel 2013-01-30 13:16
アニメーションのバリエーションはanimateの第３引数を指定することで設定できます。
下記ページの一番下の項目を参考にしてください。
http://www.webopixel.net/javascript/179.html
pine 2013-02-16 21:27
ご回答ありがとうございます。
他にも色々と参考にさせていただきたいと思います。
これからも楽しみにしています。
concon 2013-05-09 05:09
とてもわかりやすく、他のページに記載されている内容もとても魅力的です。
ありがとうございます。
恐れ多くも、このページトップボタンのリンク先ですが、特定の要素へリンクさせることはできるのでしょうか？
ご教授いただけるとうれしいです。
よろしくお願いします。
webOpixel 2013-05-09 10:50
普通に「#wrap」の部分を変えてできませんか？
concon 2013-05-22 08:01
早速ご回答いただいていたにも関わらず、お返事が遅くなり申し訳ありません。
#wrapの部分を特定のリンク先に設定してみたのですが、ページの最上部まで移動してしまいます。
あと、ipadで確認すると表示位置がずれてしまいます。
こちらのコーディングに問題があるのでしょうか？
何度もすみません。よろしくお願い致します。
benkei 2013-05-23 12:08
いつも参考にさせていただいております。
一点、質問があるのですが、
「下部までスクロールすると横からスライドして表示」
こちらを使用する際に、TOPページなど、スクロールするほどのコンテンツがない場合があるのですが、そういった時に、スクロールが無いページは元から表示させておく方法はありませんでしょうか。
webOpixel 2013-05-25 16:58
>conconさん
確認せずに返信してすみません。
このサンプルだと「scrollTop: 0」としてますので基本的にはトップにしか戻りません。
（その辺をやろうとすると若干長くなってるしまう為、趣旨から外れてくる感じがするので、、、）
クリックした位置を取得して、「scrollTop: 0」をその数値に置き換えるということをすればできますが、
この部分は削除してもらって、別途スクロール系のスクリプトを入れた方が速いかもしれません。
>benkeiさん
ウィンドウを開く関数を別にして、最初い実行すればできます。
修正してみたのでご確認ください。
しうん 2013-07-02 16:42
拝見させて頂きました。
色々検証ちゅうですが、ios4では position:fix;がきかないっぽくて、スクロールしたら、スクロールする前のbottom, leftの位置に現れました。。
webOpixel 2013-07-04 15:09
iOS4だとjsで固定するしかない気がしました。
詳しくお応えできなくてすみません。
JUNK 2013-09-01 21:20
先日こちらを拝見しまして、『ちょっとスクロールしたら「トップへ戻るボタン」を表示』がすごく感じが良かったので使用させていただくつもりで、今作っているサイトにとりあえずコピペで記述しました。
しかし、Chrome、Safari、IEは全く問題ないのですが、Windows、MacともにFireFoxのみスクロール途中に現れます。
しかしwebOpixel様のデモページを見る限りはFireFoxでも問題ないようです。
HTMLがおかしいとしか考えられないのですが、の直前に書かれていますので、何がおかしいのかわからずにおります。
しうん様のiOSの件の『スクロールしたら、スクロールする前のbottom, leftの位置に現れました。。』に近い症状のような気もするのですが・・・。
JUNK 2013-09-01 21:22
上の質問ですが、
『の直前に書かれていますので、』の上というのは/bodyタグです。タグは見えなくなっちゃうんですね。
webOpixel 2013-09-02 10:58
「スクロール途中に現れます」とは表示する位置がずれいているということでしょうか？
一度JSを外して頂いて、cssだけで正しい位置に表示できるか確認して頂けたらと思います。
JUNK 2013-09-15 12:37
返事が遅くなりました。
「スクロール途中に現れます」とは「表示する位置がずれている」ということです。
webOpixel様のデモページをこちらでそのまま読んでローカルでいろいろといじっても当方と同じ症状はでないようですので、どうやら私の書いたCSSがあやしいようです。
しかし、Firefoxだけの症状ですので、何がいけないかが特定できないでおります。
取り急ぎご報告まで。
JUNK 2013-09-15 13:48
CSSをいじってやっとわかりました。
リセット用のCSSに下記を記述しています。
html, body{height: 100%;}
それで調べていましたら下記のサイトに書かれていました。
connecre.com/connelog/connelog00000026.php
これだけですとFirefoxでスクロールが発生したとき、スクロール分切れます。
Firefoxでの高さ100%表示にはさらに記述しないといけないようです。
リセット用CSSもいくつか見直さないといけない部分もありそうです。
sakamoto 2013-09-20 17:43
こんにちは、はじめまして。
「3.下部までスクロールすると横からスライドして表示」をスマートフォンサイトで使用させていただいております。
一つ気になる点がありますので質問させてください。
スマホでアクセスすると、スライドが表示される前の領域にあるリンクがタップできなくなっております。
スライドさせて閉じるとリンクは有効になるのですが・・・。
何か対策はありますでしょうか？
たいへん気に入っておりますのでご教授いただけたら幸いです。
よろしくお願いいたします。
Yoh Satoh 2013-12-26 04:11
とても参考になりました、嬉しいです。
使わせていただきますね。
これからも楽しみです。
みゅこ 2014-01-25 15:25
とてもわかりやすくて今まで高い本を買いあさっていたのがバカバカしくなりました。
ところで、全画面表示の写真の上に、メニューを表示はできないのでしょうか？
メニューバーが写真の下に表示されて隠れてしまうんです。
webOpixel 2014-01-27 13:02
cssで「z-index」を設定してみたらどうでしょう。
ken-b 2014-02-06 17:45
いつも大変ありがとうございます。
ちょっとスクロールしたら「トップへ戻るボタン」を表示の
「スライドアニメーションして表示」の方を使用させて頂いております。
アニメーションの表示位置を一番下から表示させたいのですが、どこで設定出来ますでしょうか？
初心者なご質問で申し訳ありませんm(_ _)m
※サンプルでは一番したより50px上からアニメーションしております。
webOpixel 2014-02-08 09:39
一応下から表示されるようにはなってるはずなんですが、おかしいですね。
ブラウザとバージョンを教えてもらってもいいですか？
シールド 2014-02-17 17:53
はじめまして。
Topへ戻る感じのやつを探していたところ、偶然このサイトに出会い、さっそく使わせていただきます。。
シンプルでわかりやすいスクリプトで、とてもわかりやすかったです！
jQuery初心者で、まだコピペして動きを試してみるぐらいしかできませんが、こんな素敵なものを自分の手でつくっていけるようになりたいです。
ありがとうございます。
webOpixel 2014-02-20 10:11
コメントありがとうございます。
jQueryは最初は大変かもしれませんが、少しできるようになると色々と表現が増えて面白いですね＾＾
がんばってください！
カンタベリ 2014-03-12 17:25
はじめまして。
こちらのPAGE TOPボタンありがたく使わせて頂いておりますm(_ _)m
一つ気になることがあるのですが、ページ表示で動画やアクセス解析の読み込みが終了しないあいだ表示されたままになり、
かつその状態ではボタンをクリックしてもトップに戻ることができないのですが、これは仕方のないことなのでしょうか？
すべての読み込みが終了すると一度ボタンは消えて、少し動かすと復活、動作も元に戻ります。
読み込みに時間がかかった場合、下までスクロール終えているので、自然とPAGE TOPをクリックしますが、戻れないのでむしろストレスを与えてしまっているかな？と思います…
もし解決法などございましたらご教授願えませんでしょうかm(_ _)m
a-ru 2014-03-15 10:29
こんにちは、初めまして。
センスの良いボタン（topに戻るボタン）に
惹かれて、即お借りしました＾＾
素晴らしいボタンをお貸し下さり、
本当にありがとうございます＾＾
今はこのページしか見ていないのですが、
時間が有る時に他のページも是非拝見させて頂きたいと思います＾＾
サンプル一番上の、ごくシンプルなボタンをtopに貼ったのですが、最初からボタンが見えてしまっていて、「100」という数字をいじっても
（他の場所へ移す事？と思って違う場所に入れてみたりもしましたが）
忍者のように現れたりせず、最初から出ているので、どうしたら忍者のように現れるか、もし良ければ
（ピンとくる事がありましたら）
助言をお聞かせ願えましたら嬉しいです。
もし不明でしたら、現れているまま使用させて頂きますので大丈夫です＾＾
webOpixel 2014-03-21 13:58
> カンタベリさん
$(function() {
の部分を
$(window).load(function() {
に変えてみてはどうでしょう？
> a-ruさん
ご自身のページで使用したときに見えてしまうということでしょうか？
位置の問題ならcssの設定がいけないかもしれません。
テツ 2014-04-18 10:49
初めまして。突然の書き込み失礼します。
とても分かりやすくボタンjQueryをまとめていらっしゃったので
参考にさせていただきました。ありがとうございます。
１つ、お分かりになれば教えていただきたいのですが、
「1.ちょっとスクロールしたら「トップへ戻るボタン」を表示」で、
ページのフッター部分が表示されたらボタンを非表示にする方法ってありますか？
もしくは、ページの下から500ピクセルまでスクロールしたら非表示にしたいなど
スクロールの位置で表示と非表示の切り替えができればと思っているのですが、
なかなかうまくいきません・・・。
助言いただければ助かります＞＜；
よろしくお願いします。
※こちらの書き込み用メールアドレスには
捨てアドを使用していますが、
メールでのやりとりが可能でしたら改めてお知らせ致します。
webOpixel 2014-04-21 11:07
スクロール位置は「$(this).scrollTop()」で取得できます。
ページ下からでしたら「$(document).height()」でページ全体の高さを取得できますので、そういうのと比較したらいいのではないかと思います。
一番下のサンプルでそういうことをしておりますのでよかったら参考にしてください。
R 2014-08-31 02:57
初めまして。
使わせていただいたのですが、a-ruさんと同様に
ページをスクロールしていない最初の状態からボタンが表示されてしまいます。
CSSの設定が問題かも、とのことですが、もっと具体的に教えていただけませんでしょうか？
お手数おかけして申し訳ありませんが、よろしくお願いします。
webOpixel 2014-09-01 11:54
もしかしたら完全にjsが動いていない状態ですかね？
ブラウザの開発ツールなどでエラーを確認するとか
セレクタ「$(‘#page-top’); 」の部分がhtmlの方と合ってるか確認してみてください。
当ブログのデモでは見えてますか？
R 2014-09-02 05:34
お返事ありがとうございます。
・こちらのデモは動作しています。
・#page-topも自分のものに合わせていて、ページトップに移動できています。
・Chromeのデベロッパー ツールを確認したところ、
Uncaught TypeError: undefined is not a function cb=gapi.loaded_0:30
‘Attr.nodeValue’ is deprecated. Please use ‘value’ instead.
と出ています。サーチしても該当要素がわかりませんでした。
> もしかしたら完全にjsが動いていない状態ですかね？
レンタルwikiに使用しているんですが、jquery.js0.3.4やjqueryプラグインがデフォルトで貼られています。
このレンタルwikiは、Javascriptをサイドバーのフリーエリア（パーツ）にしか記述できないので、～ではなく、内にこちらのJavascriptコードを記述しています。
～に入れていないのは、原因になってますでしょうか？
※ちなみに、同じ場所に記述している他のJavascriptコード（jQueryではない）は、正常に動作しています。
R 2014-09-02 05:36
▼半角＜＞がタグ認識されて、削除された（？）ようなので、補足▼
> もしかしたら完全にjsが動いていない状態ですかね？
レンタルwikiに使用しているんですが、jquery.js0.3.4やjqueryプラグインがデフォルトで貼られています。
このレンタルwikiは、Javascriptをサイドバーのフリーエリア（パーツ）にしか記述できないので、head内ではなく、body内にこちらのJavascriptコードを記述しています。
head内に入れていないのは、原因になってますでしょうか？
※ちなみに、同じ場所に記述している他のJavascriptコード（jQueryではない）は、正常に動作しています。
webOpixel 2014-09-03 13:05
ASPとかでしたらもしかしたらjQueryがコンクリフト対策してるかもしれません。
下記を参考にしてみてください。
http://www.webopixel.net/wordpress/108.html
あとはcssなどで位置など調節できるかなど確認するなどですかね。。。
R 2014-09-03 21:12
(function($) { })(jQuery); を追記で動作しました！！
親身に相談に乗っていただき、ありがとうございました！！ヾ(〃^∇^)ﾉ♪
池松 2015-06-12 09:58
はじめまして、こんにちは。
私は株式会社オレンジの池松と申します。
現在、業務で当社のウェブページを作成しております。
ここに書かれているコードがとても気に入り、ぜひ当社のウェブページで使用したいと考えております。
商用利用は可能ですか。
以上、よろしくお願い申し上げます。
webOpixel 2015-06-14 18:33
> 池松さん
わざわざコメントありがとうございます。
基本自由に使用して頂いて大丈夫です。
mmsymphony 2017-03-07 16:37
社内LANのサーバーストレージを利用して、HTMLを作成しています。
あるページに「スライドアニメーションして表示」を実装すべく、HTML内にJavaScript、CSS、末尾のHTML文を書き込んで、使ってみました。
ボタンの表示には問題なく、適当にスクロールしたところでボタンが表示されるようになりましたが、ページの読み込みの時点で一瞬ボタンが表示されてしまいます。（リロードでも一瞬表示されます）
ページの読み込みの際に一瞬でも表示されてしまうのはチョット興ざめですので、解決方法があったらご伝授いただけないでしょうか。
ちなみに、業務の都合で使用しているのはInternet Explorer 8です。
よろしくお願いいたします。
webOpixel 2017-03-08 13:00
> mmsymphonyさん
サンプルはJSで非表示にしたり画面外に飛ばしたりしているので、
CSSで「display:none」などすれば最初は表示されない状態になります。
mmsymphony 2017-03-11 14:09
ご回答ありがとうございます。
全くほぼ単純にコピペして利用しているだけで（色コードとかボックスのサイズとかは変更方法分かりますが）細かい記述方法が分からないので、「display:none」をどの様に記述すればよいか分かりませんでした。
ですが、IE8では一瞬表示されますが、会社の私以外の方が利用しているIE9ではリロード等しても無駄な表示はされませんでしたので、まずは良しとします。
便利に利用させていただきます。ありがとうございました。
Casval Rem Deikun 2018-09-21 09:32
Google Chrome
バージョン: 69.0.3497.100（Official Build） （64 ビット）
Edge
DEMOページの動作が確認できませんでした。
ローカルに落としてみると動作確認できました。
なぜでしょうね・・・
webOpixel 2018-10-12 15:23
Casval Rem Deikunさん
ご連絡ありがとうございます。
ちょっと不具合があったようで修正しました。
山口 まゆみ 2020-01-16 12:30
はじめまして、こんにちは。
長い年数をかけてjavascriptを勉強しておりますが、
なかなかモノにできずうまくいかないことが多いですが、
このサイトのjQueryはシンプルなので私でも読むことができまた。
ありがとうございます。
1.ちょっとスクロールしたら「トップへ戻るボタン」を表示という
jQueryを少し書き換えてスクロールしたら「バナー」を表示することができました。
感謝です。
webOpixel 2020-01-17 21:44
山口 まゆみ さん
コメントありがとうございます。
だいぶ前の記事になりますが、少しでも役に立てたようでよかったです！