back to top-html,css,js

back to top-html,css,js

html code

<div class="footer-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="footer-Up">
                                <a href="#" class="scrollToTop">
                                <span class="glyphicon glyphicon-menu-up"></span>
                            </a>
                            </div>
                            <div class="cophy-right">
                                <p>&copy; Md.jafor iqbal</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
   css-code
   .footer-area {
    background-color: #2DCC70;
    padding: 50px 0;
}


.scrollToTop {
    width: 40px;
    height: 40px;
    padding: 10px;
    text-align: center;
    background: whiteSmoke;
    font-weight: bold;
    color: #2DCC70;
    text-decoration: none;
    position: absolute;
    top: -70px;
    right: 50%;
    transform: rotate(45deg);
    border: 1px solid;
}

.footer-Up span.glyphicon.glyphicon-menu-up {
    transform: rotate(-45deg);
}


jquery-code
$(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});