css 到顶部按钮w / FA - https://paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery

Posted 2021-05-13

$(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;
	});
	
});

<div class='scrolltop'>
    <div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px;
  z-index: 9999;
}

.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background-color:$black;
  padding:20px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
}

.scroll:hover {
  background-color:$pink;
  transition: 0.5s;
}

.scroll:hover .fa {
  padding-top:-10px;
}

.scroll .fa {
  font-size:30px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  color:$white;
}