How to create Back to Top Button using css and jquery

Create back to top option dynamically on scroll change for long pages. No plugin and complex integration, just add small script process code and use it in page. Back to top option created using CSS and jQuery.

Back to top is suitable for website with lots of page content. Once user scroll page, back to top option display on right bottom area. On click it page will smoothly scroll to top of page and hide option.

Adding Back to top process code

 

Back to top process code is small code snippets that will create dynamic top option and bind its event for scroll page to top. Just add code anywhere in page using script tag.

var backToTop = {
    set: function(){
      var sTopHtml= '

Top
';
      $('body').append(sTopHtml);

      if($('body').scrollTop() > 40)
        $('.s-top').removeClass('s-none');

      $('body').on('click', '.s-top', function(){
        $('html, body').animate({scrollTop: $('body').offset().top}, 600);
      });
    },
    scroll: function(){
      if($(window).scrollTop() > 40){
        if($('.s-none').length)
          $('.s-top').removeClass('s-none');
      }else if($('body').scrollTop() < 40){
        if($('.s-none').length == 0)
          $('.s-top').addClass('s-none');
      }
    }
  };

 

Use Back to top process code

 

For activate back to top process code, we need to add below code in document ready function. Add backToTop.set() for create html top button option and bind its event. For hide show button on scroll change need to add backToTop.scoll() code in window scroll event.

  $(function(){
    backToTop.set();

    $(window).scroll(function(e){
      backToTop.scroll();
    });
  });

 

Style Back to top option

 

For set back to top option bottom right ‘.s-top’ class used. Add below style code in css file or in page with style tag. Change back to top button style from ‘.s-top’ class to match with page design.

.s-top{
    position:fixed;
    bottom:15px;
    right:20px;
    padding:10px;
    font-size:16px;
    font-weight:bold;
    z-index:999;
    background-color:#336699;
    color:#fff;
    cursor:pointer;
}

.s-none{display:none;}

Regards : Web Design Company