縦長ページでの「ページトップ」ボタンの設置方法

投稿日時: 04/19 EddyK

こんにちは。EddyKささきです。

ちょっとしたTipsかなあといったことをお教えします。

皆さん、ページが縦長になった場合、ページトップへのボタンがあったらと思われたことはないでしょうか。私のサイトでは、カスタマイズをし実現していたのですが、よくよく考えれば全てのページに表示するヘッダー部分などに「お知らせ」プラグインの追加でできるではありませんか。

javascriptの記述権限をもった担当者で「お知らせ」プラグインでhtml記述すれば、カスタマイズ・テーマ作成をしなくても可能なのです。

htmlでcss・javascriptとともに<p>タグの一行を記述すれば実現するのです。

以下の内容でできるので、興味ある方は実験してみてはいかがでしょうか。

サンプルはデモサイトでも公開しています。

<style>
p#to_top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 90%;
display: none;
z-index: 99;
}
p#to_top a {
background: #666;
text-decoration: none;
color: #fff;
width: 60px;
padding: 12px 0;
text-align: center;
display: block;
border-radius: 40px;
opacity:0.7;
line-height: 1.35;
}
p#to_top a:hover {
text-decoration: none;
background: #999;
}
</style>
<script>
$(function() {
var topBtn = $('#to_top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

<p id="to_top"><a href="#nc-container">PAGE<br />TOP</a></p>

Re: 縦長ページでの「ページトップ」ボタンの設置方法

投稿日時: 06/03 jsuzuki

ささき 様

 

遅くなりましたが、教えていただいたTipを私の管理するサイトで設置させていただきました。

確かに長いスクロールで、Topに戻るのが面倒でしたが、それも仕方ないと思っていましたが、すごく便利になりました。

ありがとうございます。

このような便利なTipが、増えてくると嬉しいなと思いました。

 

 

こんにちは。EddyKささきです。

ちょっとしたTipsかなあといったことをお教えします。

皆さん、ページが縦長になった場合、ページトップへのボタンがあったらと思われたことはないでしょうか。私のサイトでは、カスタマイズをし実現していたのですが、よくよく考えれば全てのページに表示するヘッダー部分などに「お知らせ」プラグインの追加でできるではありませんか。

javascriptの記述権限をもった担当者で「お知らせ」プラグインでhtml記述すれば、カスタマイズ・テーマ作成をしなくても可能なのです。

htmlでcss・javascriptとともに<p>タグの一行を記述すれば実現するのです。

以下の内容でできるので、興味ある方は実験してみてはいかがでしょうか。

サンプルはデモサイトでも公開しています。

<style>
p#to_top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 90%;
display: none;
z-index: 99;
}
p#to_top a {
background: #666;
text-decoration: none;
color: #fff;
width: 60px;
padding: 12px 0;
text-align: center;
display: block;
border-radius: 40px;
opacity:0.7;
line-height: 1.35;
}
p#to_top a:hover {
text-decoration: none;
background: #999;
}
</style>
<script>
$(function() {
var topBtn = $('#to_top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

<p id="to_top"><a href="#nc-container">PAGE<br />TOP</a></p>