1.ちょっとスクロールしたら「トップへ戻るボタン」を表示
ちょっとスクロールするとフェードして﹁トップへ戻るボタン﹂を表示を表示します。
ボタンは下の方にこんな感じで配置します。
html
javascript
ボタンは下の方にこんな感じで配置します。
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
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;
}
}
}
});
});
どれも似たようなものばかりでちょっと退屈だったかもしれませんが以上です。
