jQuery｜ぼうびろく

19 May

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

01 September

http://saka-d.com/omotenashi/20120824.html

HTML
まずhtmlに「トップへ戻る」枠を書く

<div id="pagetop"><a href="#header">トップへ戻る</a></div>

SCRIPT
id名を書き換え丸写しする。数値を変えると速度や画像出現ポイントが変わる

<script>
jQuery(function() {
var topBtn = $('#pagetop');
topBtn.hide();

jQuery(window).scroll(function () {
if ($(this).scrollTop() > 150) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});

topBtn.click(function () {
jQuery('body,html').animate({scrollTop: 0}, 500);
return false;
});
});
</script>

CSS
ロールオーバーで画像を変えたい。
png透過して画像の大きさが違うとか形が違うと、下の画像が見えてしまう。
なのでon･off2枚の画像をくっつけて、hoverしたときに位置を動かす
固定するのでfixed設定。

#pagetop { position:fixed; bottom:0px; right:0px; }
#pagetop a{
display:block;
width:50px;
height:100px;
background:url(images/pagetop.png) no-repeat;
}
#pagetop a:hover{
background-position: 0 -100px;
}

WPで画像を付け替えられる「page to top」プラグインが普通にない。
勝手に置き換えればできるかもしんなけど、デフォルト設定のこととか色々あるしめんどい。
ちょっと検索したら簡単なのが設置できるじゃないか。
わざわざプラグインでやるまでもない。あまりプラグインいれたくないし。
全ページに必要だからscriptはfooterに入れるだけでいいし。