<a href="#" class="top-button" id="back-to-top" title="トップへ戻る">
    ▲
</a>

<script>
document.addEventListener("DOMContentLoaded", function() {
    let topButton = document.getElementById("back-to-top");

    window.addEventListener("scroll", function() {
        if (window.scrollY > 300) { // 300px以上スクロールしたら表示
            topButton.style.opacity = "1";
            topButton.style.pointerEvents = "auto";
        } else {
            topButton.style.opacity = "0";
            topButton.style.pointerEvents = "none";
        }
    });

    topButton.addEventListener("click", function(event) {
        event.preventDefault();
        window.scrollTo({ top: 0, behavior: "smooth" });
    });
});
</script>


<style>
.top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px; /* ボタンのサイズ */
    height: 40px;
    background-color: black; /* ボタンの背景色 */
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 40px; /* 縦の中央揃え */
    border-radius: 50%; /* 丸い形にする */
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0.3s ease-in-out, transform 0.2s;
    pointer-events: none; /* 初期状態ではクリック不可 */
}

.top-button:hover {
    background-color: #444; /* ホバー時に少し明るく */
    transform: scale(1.1);
}

/* スマホ向けにサイズ調整 */
@media (max-width: 768px) {
    .top-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        bottom: 15px;
        right: 15px;
    }
}
</style>


<script>
    window.addEventListener('load', function () {
        // データが完全に読み込まれた後に処理を実行
        const targetElements = document.querySelectorAll('.notion-collection-row-value');

        targetElements.forEach(element => {
            const text = element.textContent.trim();
            const urlPattern = /(https?:\/\/[^\s]+)/g;

            if (urlPattern.test(text)) {
                const htmlWithLinks = text.replace(urlPattern, (url) => {
                    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
                });
                element.innerHTML = htmlWithLinks;
            }
        });
    });
</script>

「VIRTUAL LIVE CALENDAR」バーチャルライブ・バーチャルイベントに特化した"みんなでつくる"イベントカレンダーサービスです。

VIRTUAL LIVE CALENDAR

イベント申請方法

VIRTUAL LIVE CALENDARについて

運営会社

リクエスト

利用規約

トップページのタイトルは非表示になっています。テキストの背景色を個別で当てると丸く囲む装飾になります。

The title of the top page is hidden. If the background color of the text is applied individually, it will be a rounded decoration.

VIRTUAL LIVE CALENDARについて

VIRTUAL LIVE CALENDARとは

VIRTUAL LIVE CALENDARを作った経緯

VIRTUAL LIVE CALENDARで出来ること

VIRTUAL LIVE CALENDARが目指す未来