css 回到顶部

Posted 2021-05-13

//scroll to element function
$.fn.scrollView = function () { 

  var 
    siteHeader = ".fixed-header",
    offset = 0,
    headerHeight = 0;

  if($(siteHeader).length > 0){
    headerHeight = $(siteHeader).outerHeight();
  }
  offset = offset + headerHeight;
  return this.each(function () {
  $('html, body').animate({
    scrollTop: $(this).offset().top - offset
  }, 600);
  });

}


// scroll to element via data scroll-to 
function scrollToElement(e){
  e.preventDefault();
  var 
    $this = $(this), 
    target = $this.data("scroll-to");
  $(target).scrollView();
}
 
$("body").on("click","[data-scroll-to]", scrollToElement);
 
 
function handleScroll() {
	$("body").toggleClass('scroll-down show-header', $(window).scrollTop() > 0);
	$("body").toggleClass('show-back-to-top', $(window).scrollTop() / ($(document).height() - $(window).height()) > 0.4);
}
$(window).on("load scroll touchmove", function() {
	handleScroll();
});

<div class="back-to-top _transition" data-scroll-to="body"></div>

.back-to-top{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: -80px;
	right: 20px;
	z-index: 1000;
	cursor: pointer;
	border-radius: 3px;
	background: url(images/back-to-top-arrow.svg) no-repeat center 17px rgba(0, 161, 224, 0.5);
	box-shadow: 0 4px 10px 0 rgba(13, 57, 101, 0.17);
	opacity:0;
}

body.show-back-to-top .back-to-top:hover{
	background-color: #00a1e0;
	background-position: center 14px;
	opacity: 1;
}

body.show-back-to-top .back-to-top{
	opacity: 0.7;
	bottom: 20px;
}