Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Thursday 9 February 2017

Floating Back to Top Button with Smooth Scroll using CSS & JQuey

Author:  |   |  No Comments | 

Today, we will learn about how to make floating back to top button with smooth scroll using CSS & JQuery.

Floating back button is fantastic and it's most useful button for when website page size is too much large and user want to scroll at the top when it's at bottom of the page. It's very useful to make user friendly website.

This type of button is most useful when we have a large amount of content in a single page that time we need this type of button going at the top of the page.

To make better interface and responsive button, we need to use css and jQuery to create this button.

When page is scroll down, then button automatically display on the page and when click on button then page will scroll and move on top of the page.

Floating back button helped to back to the top of the screen without manually scroll to the user.

We are using CSS and JQuery for create this button. We describe all process and code of this program. This button will help for web developer for make website user friendly. At the end , We also Provide Live Demo button for run this example.

Now , Follow the steps and run this example :


  • JavaScript :


First of all , you need to add this link for add jquery.

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Now , Write this JavaScript code in script tag for check that if page scroll down above 100px then button will be display otherwise button will not be display on the page.

1
2
3
4
5
6
7
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
    } else { 
        $('#scroll').fadeOut(); 
    } 
});

Now, Write this JavaScript code for button click event. When button is clicked then page will scroll at the top of the page. We also put animation for smooth scrolling using .animate() function and also use .scrollTop() method for page scroll to top.

1
2
3
4
$('#scroll').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

This is full JavaScript Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>


  • CSS :


Now , Write this below code for button view.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}


  • HTML :


1
<a href="#" id="scroll" style="display: none;"><span></span></a>


  • Full Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script type='text/javascript'>
    $(document).ready(function(){ 
     $(window).scroll(function(){ 
      if ($(this).scrollTop() > 100) { 
       $('#scroll').fadeIn(); 
      } else { 
       $('#scroll').fadeOut(); 
      } 
     }); 
     $('#scroll').click(function(){ 
      $("html, body").animate({ scrollTop: 0 }, 600); 
      return false; 
     }); 
    });
   </script>
   <style type="text/css">
   #scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
   }
   #scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
   }
   #scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
   }
   </style>
 </head>

 <body>
  <a href="#" id="scroll" style="display: none;"><span></span></a>
  <!-- write your page content here -->
 </body>
</html>


  • Watch Video :




Click Here For Live Demo :
Live Demo

, , , , , ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.