html 回到顶部按钮

Posted 2021-05-10

https://paulund.co.uk/how-to-create-an-animated-scroll-to-top-button-with-jquery


	<!--  Back to top button , BOOTSTRAP BASED -->
	<a class="fade-half back-to-top inner-link" href="#top">
		<div class="arr_cont"><img src="/wp-content/uploads/2018/10/up-1.png"></div>
		<div class="libreFont top_text">Scroll<br>to top</div>
	</a>


<script>
function backToTop() {
	jQuery( window).scroll(function() {
		if (jQuery(this).scrollTop() > 100) {
			console.log('window > 200') ;
			jQuery('.back-to-top').fadeIn();
		} else {
			jQuery('.back-to-top').fadeOut();
		}
	});
}

</script>


<style>
  
.back-to-top {
    position: fixed;
    /* top: 75px; */
    right: 0px;
    bottom: 40px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    height: 100px;
    width: 90px;
    padding: 5px 11px;
    word-break: break-word;
    display: none;
}

.arr_cont {
    border-radius: 50%;
    background: #3e4546;
    width: 62px;
    height: 55px;
    line-height: 50px;
}
  
</style>