JavaScript Back To Top Button


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>).
<!-- Font Awesom 4.7.0 CDN Link --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />


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>).

<!-- **********************Back to top button Start********** -->
<div class="scrolltop float-right">
    <i class="fa fa-arrow-up" onclick="topFunction()" id="myBtn"></i>
</div>
<!-- **********************Back to top button End********** -->


  • 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-behaviorsmooth;
}

#myBtn {
  displaynone;
  positionfixed;
  bottom20px;
  right40px;
  z-index99;
  bordernone;
  colorwhite;
  background#ba252f;
  padding10px;
  border-radius10px;
  -webkit-transition0.5s ease;
  transition0.5s ease;
}

#myBtn:hover {
  backgroundblack;
  cursorpointer;
}
/* **********************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>


Advertisement
Advertisement

Post a Comment

1 Comments

  1. 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

© Copyright 2024 & 2025 - Team Krope - All right reserved