Scroll Up button

This commit is contained in:
Gemdation 2025-06-10 13:56:04 -05:00
parent 7d05a5f23c
commit 15b4748c8b
4 changed files with 39 additions and 1 deletions

View File

@ -22,7 +22,7 @@
nav {margin-bottom: 0;}
</style>
</head>
<body>
<body onload="loadafterwednesdaycheck();">
<div id="bgmplayer">
<h2>BGM player</h2>
<a href="javascript:playBGM();" id="shopbgmselector"><button id="shopbgm">Play</button></a>

View File

@ -36,6 +36,7 @@
<tr><td><a href="main.css">main.css</a></td></tr>
<tr><td><a href="music.js">music.js</a></td></tr>
<tr><td><a href="NEW_en.gif">NEW_en.gif</a></td></tr>
<tr><td><a href="scroll-up.svg">scroll-up.svg</a></td></tr>
<tr><td><a href="shop.ttf">shop.ttf</a></td></tr>
<tr><td><a href="shop.wav">shop.wav</a></td></tr>
</table>

9
meta/scroll-up.svg Normal file
View File

@ -0,0 +1,9 @@
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<title>New Project</title>
<style>
.s0 { fill: #36bfed }
</style>
<path id="Shape 4" fill-rule="evenodd" class="s0" d="m100.5 44c6.9 0 12.5 5.6 12.5 12.5v67c0 6.9-5.6 12.5-12.5 12.5-6.9 0-12.5-5.6-12.5-12.5v-67c0-6.9 5.6-12.5 12.5-12.5z"/>
<path id="Shape 3" fill-rule="evenodd" class="s0" d="m23.5 161h151c5.8 0 10.5 4.7 10.5 10.5 0 5.8-4.7 10.5-10.5 10.5h-151c-5.8 0-10.5-4.7-10.5-10.5 0-5.8 4.7-10.5 10.5-10.5z"/>
<path id="Shape 1" fill-rule="evenodd" class="s0" d="m99.6 12c3.9 0 7.5 2.3 9.4 6l59 110.9c1.9 3.7 1.9 8.3 0 12-1.9 3.8-5.6 6.1-9.5 6.1h-117.8c-3.9 0-7.6-2.3-9.5-6.1-1.9-3.7-1.9-8.3 0-12l59-110.9c2-3.7 5.5-6 9.4-6zm0 38.6c-3.6 0-6.5 3.2-6.5 7.2v33.8c0 4 2.9 7.2 6.5 7.2 3.6 0 6.5-3.2 6.5-7.2v-33.8c0-4-2.9-7.2-6.5-7.2zm8.7 67.5c0-2.6-0.9-5-2.5-6.8-1.7-1.9-3.9-2.9-6.2-2.9-2.3 0-4.5 1-6.2 2.9-1.6 1.8-2.5 4.2-2.5 6.8 0 2.5 0.9 5 2.5 6.8 1.7 1.8 3.9 2.8 6.2 2.8 2.3 0 4.5-1 6.2-2.8 1.6-1.8 2.5-4.3 2.5-6.8z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -21,6 +21,8 @@
summary {color:red;text-decoration: underline;list-style: none;font-weight: bold;user-select: none;cursor: pointer;}
details {color:red;outline: solid 1px red;padding-bottom: 5px;margin-bottom: 10px;}
details h2 {color:red}
button#scrollUp {position:fixed;bottom: 10px; right: 10px; display: none; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease;padding-bottom:0;z-index:1000;}
button#scrollUp.show {display:block;opacity:1;transform: translateY(0);}
</style>
</head>
<body onload="loadafterwednesdaycheck();">
@ -35,6 +37,8 @@
<nav><a href="install" class="btn">Install</a> <span class="active">Support</span> <a href="errors" class="btn">Errors</a> <a href="branding" class="btn">Branding</a> <a href="specials" class="btn">Specials</a> <a href="credits" class="btn">Credits</a></nav>
<button id="scrollUp" title="Go to top"><img src="meta/scroll-up.svg" style="width: 30px;" alt="Scroll up"></button>
<h2>Shop-related</h2>
<div>
@ -171,5 +175,29 @@
<footer><p>The WiiMart Team is not affiliated with Nintendo or any related parties. To contact, please send an email to <a href="mailto:support@wiimart.org"><b>support@wiimart.org</b></a>.</p></footer>
<script>
const scrollUp = document.getElementById("scrollUp");
window.addEventListener("scroll", () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercent = scrollTop / scrollHeight;
if (scrollPercent > 0.3) {
scrollUp.classList.add("show");
} else {
scrollUp.classList.remove("show");
}
});
scrollUp.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
</body>
</html>