Scroll to top button

Scroll to top

html
// add this after footer
<a href="#scrollto_top" class="scrolltop"><i class="fa fa-chevron-up"></i>Scroll to top</a>
// add id "top" to header element

css
.scrolltop {
	 display: none;
	 position: fixed;
	 bottom: 70px;
	 right: 10px;
	 font-size: 0;
	 width: 38px;
	 height: 38px;
	 background: #000;
	 opacity: 0.7;
	 z-index: 200;
	 transition: all 450ms ease;
}
 .scrolltop:before {
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 margin-top: -2px;
	 font: 26px "FontAwesome";
	 content: '\f077';
	 color: #fff;
	 z-index: 101;
	 transition: all 450ms ease;
}
 .scrolltop:hover {
	 bottom: 75px;
	 opacity: 1;
}
 .scrolltop:hover:before {
	 color: #fff;
	 opacity: 1;
}
 @media (max-width: 800px) {
	 .scrolltop {
		 left: 10px;
		 right: auto;
	}
}
  
  // js
  var height = $('#top').height();
        $(window).on('scroll', function() {
            if($(this).scrollTop() > height) {
                $('.scrolltop').fadeIn();
            } else {
                $('.scrolltop').fadeOut();
            }
        });
        $(document).on('click', '[href*="#scrollto"]', function(event) {
            event.preventDefault();
            const target = $(this).attr('href').replace("#scrollto_","");
            $('html, body').animate({ scrollTop: $("#"+target).offset().top }, 1000);
        });
  
}