Back to top with CSS and jQuery

The Back to Top button takes the user back to the top of the page.

The button is visible at the bottom when the user starts scrolling the web page and crosses the defined range. It remains fixed at its position during the scroll.

It auto hide when the user reaches the top of the page.

Back to top with CSS and jQuery


Contents

  1. HTML
  2. CSS
  3. jQuery
  4. Completed Code
  5. Demo
  6. Conclusion

 

1. HTML

Add an anchor element in the page. You can either put at the start or end within the <body>.

Completed Code

<!-- Your content -->

<!-- Back to Top -->
<a href="#" class="back-to-top"></a>

 

2. CSS

Set the position: fixed and add an image in the background of the <a class='back-to-top'>.

Code

.back-to-top {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 64px;
 height: 64px;
 z-index: 9999;
 cursor: pointer;
 text-decoration: none;
 transition: opacity 0.2s ease-out;
 background-image: url(top.png);
}

.back-to-top:hover{
 opacity: 0.7;
}

 

3. jQuery

Attach scroll

Attaching the .scroll event handler to detect scroll in the web page. Using .scrollTop() method to returns the number of pixels the users have scrolled.

If the value is greater than 100 then .fadeIn() the <a class='back-to-top'> otherwise .fadeOut().

Back to top

On button click call .animate() method where passing scrollTop: 0 and 800 (duration) for scroll to top.

NOTE – Change value of showAfter variable to adjust when you want to display the button on the screen.

Code

$(document).ready(function(){
 
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){

  // Show button after 100px
  var showAfter = 100;
  if ( $(this).scrollTop() > showAfter ) { 
   $('.back-to-top').fadeIn();
  } else { 
   $('.back-to-top').fadeOut();
  }
 });
 
 //Click event to scroll to top
 $('.back-to-top').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
 
});

 

4. Completed Code

<!-- CSS -->
<style>
.back-to-top {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 64px;
 height: 64px;
 z-index: 9999;
 cursor: pointer;
 text-decoration: none;
 transition: opacity 0.2s ease-out;
 background-image: url(top.png);
}
.back-to-top:hover{
 opacity: 0.7;
}

</style>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
  // Show button after 100px
  var showAfter = 100;
  if ($(this).scrollTop() > showAfter ) { 
   $('.back-to-top').fadeIn();
  } else { 
   $('.back-to-top').fadeOut();
  }
 });
 
 //Click event to scroll to top
 $('.back-to-top').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
 
});
</script>

<!-- Your content -->

<!-- Back to top -->
<a href="#" class="back-to-top"></a>

 

5. Demo

Scroll the page.


 

6. Conclusion

Ideal for the long web page to improve the user experiences and it is easy to implement in the project. The user doesn’t need to manually scroll the web page in upward direction to get on top of the web page.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *