I think it's important to encourage people to use more HTML options over js ! It's more lightweight and use less"resources", isn't it ?
So I took the example and just change "<button>" into a "<a>" with href to "top" and added id="top" to the first, maybe we can recommend to use an already existing id, the one of the header for example
And after some research I saw that using an "<a>" to go to the top is write as a tip in this article
What do you think ?
Have a nice day
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>
body {font-family: Arial, Helvetica, sans-serif;font-size:20px;}#myBtn {display: none;position: fixed;bottom:20px;right:30px;z-index:99;font-size:18px;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding:15px;border-radius:4px;text-decoration:none;}#myBtn:hover {background-color:#555;}</style></head><body><divid="top"style="background-color:black;color:white;padding:30px">Scroll Down</div><divstyle="background-color:lightgrey;padding:30px30px2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div><ahref="#top"id="myBtn"title="Go to top">Top</a><script>//Get the buttonvar mybutton = document.getElementById("myBtn");// When the user scrolls down 20px from the top of the document, show the button
window.onscroll =function(){scrollFunction()};function scrollFunction(){if(document.body.scrollTop >20|| document.documentElement.scrollTop >20){
mybutton.style.display ="block";}else{
mybutton.style.display ="none";}}</script></body></html>
Suggestion for "How TO - Scroll Back To Top Button" page
in Suggestions
Posted
Hi,
This suggestion is about this article
I think it's important to encourage people to use more HTML options over js ! It's more lightweight and use less"resources", isn't it ?
So I took the example and just change "<button>" into a "<a>" with href to "top" and added id="top" to the first, maybe we can recommend to use an already existing id, the one of the header for example
And after some research I saw that using an "<a>" to go to the top is write as a tip in this article
What do you think ?
Have a nice day