add support go to top window

pull/72/head
Charles 3 years ago
parent b08ed01bec
commit b6e18bd0b3

@ -421,3 +421,20 @@ body::-webkit-scrollbar-thumb {
background-color: rgb(79, 78, 78);
border-radius: 5px;
}
#goToTop {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
border: none;
outline: none;
background-image: url(../images/up-arrow.png);
background-size: contain;
width: 40px;
height: 40px;
cursor: pointer;
color: white;
cursor: pointer;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -149,6 +149,8 @@
<div id="list">
</div>
<div id="goToTop"></div>
<script>
require("../src/translate_index")
</script>

@ -85,6 +85,8 @@
<h2 id="playlistName"></h2>
<div id="list">
</div>
<div id="goToTop"></div>
</body>
</html>

@ -97,4 +97,22 @@ function advancedToggle() {
getId("advanced").style.display = "none";
advancedHidden = true;
}
}
}
// Check scroll go to top
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
getId("goToTop").style.display = "block";
} else {
getId("goToTop").style.display = "none";
}
}
// Function to scroll go to top
getId("goToTop").addEventListener("click", () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});

@ -846,6 +846,8 @@ function afterSave(location, filename, progressId) {
).innerHTML = `<b onClick="showItem(\`${finalLocation}\`, \`${finalFilename}\`)">${i18n.__(
"File saved. Click to Open"
)}</b>`;
window.scrollTo(0, document.body.scrollHeight);
}
function showItem(location, filename) {

Loading…
Cancel
Save