Skip to main content

Back To Top Button | Rustcode

by Rustcode
Back-to-top-button-html-css-rustcode

Some small elements can change the complete user experience in websites. You can check our article where you learn how to create a tooltip using HTML and CSS but in this article, we will discuss "back to top button" because nowadays this button is available on almost every website and Without this button, the website is incomplete.

We can also use other plugins and JavaScript but to create this element we are using HTML, CSS and JQuery.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
<title>Back To Top Button | Rustcode</title>
<style>
</style>
</head>

<body>
 
  main content.

</body>
</html>


2. JQUERY PLUGIN

The basic HTML structure is ready for us, now let's include the JavaScript library "jQuery" in this HTML document. You can download jQuery from here. 

<!DOCTYPE html>
<html>
   <head>
      <title>Back To Top Button</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
    
    main Content.

   
   </body>
</html>


3. HTML

   <body>
      <a href="#" id="scroll-btn"><span></span></a>
      BACK TO TOP BUTTON
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
    
   </body>



4. CSS

body{
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 80px;
  text-align: center;
  color: grey;
  font-size: 30px;
  font-weight: bold;
}
#scroll-btn{
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 60px;
  text-indent: -9999px;
  background-color: #3498db;
  display: none;
}
#scroll-btn span{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0px;
  width: 0px;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
}
#scroll-btn:hover{
  background-color: #e74c3c;
  opacity: 1;
  filter: "alpha(opacity=100)";
}


5. SCRIPT 

$(document).ready(function(){
  $(window).scroll(function(){
    if($(this).scrollTop() > 100){
      $("#scroll-btn").fadeIn();
    }
    else{
      $("#scroll-btn").fadeOut();
    }
  });

  $("#scroll-btn").click(function(){
    $("html, bady").animate({scrollTop: 0}, 700);
    return false;
  });
});


6. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


7. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment