MAIL
[Topへ戻る]のスタイルとスクリプト
今回、スタイルとスクリプトを１つずつ設定します。
手順は以下の通りです。特にテーブルの内容は関係ありませんので、[Topへ戻る]のリンクを付けたいテーブルに設定してください。
以下を設定すると、一覧で下にスクロールしたときに[Topへ戻る]の上矢印のアイコンが表示されることがわかります。
- 対象のテーブルを開きます。
- メニューから、「管理」→「テーブルの管理」を開きます。
- 「スタイル」タブを開きます。
- 「新規作成」をクリックし、[タイトル]に「GoToTop」などと入力し、以下のスタイルを記載します。
- 「出力先」は、「全て」のチェックを外し、「一覧」にチェックをして、「追加」をクリックします。
- 「スクリプト」タブを開きます。
- 「新規作成」をクリックし、[タイトル]に「GoToTop」などと入力し、以下のスクリプトを記載します。
- 「出力先」は、「全て」のチェックを外し、「一覧」にチェックをして、「追加」をクリックします。
- 「更新」をクリック後に、一覧画面で動きを確認します。
設定が完了したら、動作を確認してみましょう。
＜スタイル＞
.scrollup {
display: none;
width: 42px;
height: 42px;
line-height: 35px;
position: fixed;
bottom: 10%;
right: 5%;
color: #eee;
font-size: 40px;
background: #929292;
text-align: center;
text-decoration: none;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
opacity:0.85;
filter:alpha(opacity=85);
font-family: "Helvetica Neue", "Helvetica", "Arial";
}
.scrollup:hover, .scrollup:focus {
color: #eee;
text-decoration: none;
background: #5b5b5b;
}＜スクリプト＞
const html = `<a href="#" class="scrollup">›</a>`;
$("body").append(html);
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 150);
return false;
});
一覧画面で下までスクロールしたときに。。。
こんにちは、プリザンターのスクリプトの開発を担当しておりますCCSの徐（ジョ）です。
世間では、GoToトラベルや、GoToイートなどで盛り上がっていますが、今回はGoToトップについてです。
テーブルに登録されているデータ件数が多い時に、一覧画面で下の方までスクロールした場合に、他のサイトによくある[Topへ戻る]のリンクがなくて少し困ったことがある人がいませんでしょうか？
フィルタやメニューは、上部にあるのでトップに戻る場合はスクロールして戻さないといけません。これでは少し面倒ですよね。
そこで、今回は一覧画面で[Topへ戻る]のリンクを追加するスクリプト（＋スタイル）を紹介したいと思います。
詳細は次で説明いたします。
なおブラウザは最新のChromeで確認をしていますので、その他のブラウザやバージョンでの動作は未確認ですのでご了承ください。