Up button for site


Sometimes, when there is too much content on the page, and when scrolling down, you have to go back to the header of the site, and you can flip the laziness up yourself you can implement button “Up” on jQuery.

At the end of the page, before closing the tag “</body>” set our button wrapper.

<div class="sab-up"></div> <!-- You can use any class or  id. The main thing is that the selector will be posted events and styles. -->

Next, you need to write the script itself for the appearance / hiding of the button when scrolling. We do this through jQuery, for this a library must be enabled.

$(document).ready(function(){
	$(window).scroll(function(){ // Scroll event
		if($(window).scrollTop()>=300){ // If we scroll the page to 300px, then we show the button, if not, then hide it.
			$('.sab-up').addClass('active');
		}else{
			$('.sab-up').removeClass('active');
		}
    });
    if($(window).scrollTop()>=300){ // If we open the page, and it is already scrolled 300px, then show the button, if not, then hide it.
		$('.sab-up').addClass('active');
	}else{
		$('.sab-up').removeClass('active');
	}
    $('.sab-up').click(function () { // Event on click up button.
		$('html, body').animate({scrollTop:0}, 800); // scroll animation            
    });
});

Well and in the conclusion we register styles for the button. I will give an example that is implemented on the site.

.sab-up{
   position: fixed;
   bottom: 30px;
   right: -50px;
   width: 40px;
   height: 40px;
   content: '';
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   z-index: 99;
   border-radius: 10px;
   background: #ffd800;
   border-bottom: 4px solid #998200;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
   transition: all 0.5s;
   opacity: 0;
}
   .sab-up:hover{
      background: #ffba00;
   }
   .sab-up.active{
      right: 30px;
      opacity: 1;
   }
   .sab-up:before{
      position: absolute;
      width: 14px;
      height: 14px;
      box-sizing: border-box;
      display: block;
      content: '';
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      top: 50%;
      left: 50%;
      margin-top: -3px;
      margin-left: -7px;
      transform: rotate(-45deg);
   }



Connect

If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email info@bobreod.ru





By submitting the form, you agree to our privacy policy