01
September
「トップへ戻る」を普通に記述する方法
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に入れるだけでいいし。
PR