2020-4 Blog Entry List
スクロール時の「ページトップ」ボタンの表示
コロナで家から出れず、お客さんのNCサイトを朝から作成していたのですが、それもひと段落したので、ちょっと試しにこの「デモ」サイトで実験
ヘッダーに「お知らせ」プラグインを追加し以下の内容をhtml記述で登録
するとスクロールしたら右下に「ページトップ」ボタンが表示されます
当然のことですが、今まではテーマを作成し、全てのページにテーマを適用したりページのベースに組み込むカスタマイズをし実現していましたが、もっと手軽に「お知らせ」プラグインの追加で実現してみました。
これはちょっと縦長のページの場合、便利なものでどなたでも欲しい機能ではないでしょうか。
もちろん、scriptの記述権限を設定した後でないとhtml記述でscriptの登録はできませんが、これも管理メニューからの設定で管理者であれば可能です。
一度試されてみてはいかがでしょうか。問題があれば、そのフレーム(コンテンツ)を削除すればもとにもどるはずです。
■以下がhtmlの記述内容
<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>
NetCommons3.3.1にバージョンアップしました
先日久しぶりにNCの公式サイトを覗いたらNC3.3.1がリリースされていました。
そこで、ダウンロード・バージョンアップしました。
ドロップダウンメニューもカスタマイズを適用したら問題なく使用できました。とりあえず無事バージョンアップを完了しました。
めでたし、めでたし!