JavaScript Back To Top Button

Huzaifa Asim February 07, 2024

If you want to create a button like a user clicks on it, it will reach the top of your web page so you can create a back-to-top button with a copy of the given source code.

Copy this code and paste it in the head element (<head>).

If this CDN does not work, you can copy the latest CDN or you can add a custom icon or text.

Copy this code and paste it in the body element (<body>).

<div class="scrolltop float-right">
<i class="fa fa-arrow-up" onclick="topFunction()" id="myBtn"></i>
</div>

Copy this code and paste it into your external CSS file or paste it into the style element if you are using internal CSS.

/* **********************Back to top button Start************************* */
html{
  scroll-behavior: smooth;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 40px;
  z-index: 99;
  border: none;
  color: white;
  background: #ba252f;
  padding: 10px;
  border-radius: 10px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

#myBtn:hover {
  background: black;
  cursor: pointer;
}
/* **********************Back to top button End************************* */

Copy this code and paste it after the body tag (</body>) or if you have an external javascript file, paste it into the file but without the script element.

<script>
    //myBtn

    // Get the Button
    mybutton = document.getElementById("myBtn");

    // Window scroll
    window.onscroll = function () { scrollFunction() };

    // Function Start
    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // Clicking Button
    function topFunction() {
        document.body.scrollTop = 0; //For Safari
        document.documentElement.scrollTop = 0; //For chrome, Fire Fox .....
    }
</script>

1 Comments

AnonymousFebruary 12, 2024 at 7:33 AM
import pyautogui
import time
import random

time.sleep(5)
pyautogui.press('win')
time.sleep(1)
pyautogui.typewrite('notepad')
time.sleep(1)
pyautogui.press('enter')
time.sleep(2)
pyautogui.write('Hello, world!')
# pyautogui.moveTo(100, 100, duration=1)

while True:
x = random.randint(0, 1920)
y = random.randint(0, 1080)
duration = random.uniform(0.5, 2.0)
pyautogui.moveTo(x, y, duration=duration)
time.sleep(1)

pyautogui.click()

ReplyDelete
Replies