css Genesis的简单而流畅的Back-To-Top按钮

Posted 2021-05-13

jQuery(document).ready(function($){
	// Scroll (in pixels) after which the "To Top" link is shown
	var offset = 300,
		//Scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//Duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//Get the "To Top" link
		$back_to_top = $('.to-top');

	//Visible or not "To Top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out');
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass('top-fade-out');
		}
	});

	//Smoothy scroll to top
	$back_to_top.on('click', function(event){
		event.preventDefault();
		$('body,html').animate({
			scrollTop: 0 ,
		 	}, scroll_top_duration
		);
	});

});

<?php //* Don't copy the php

// Enqueue To Top script
add_action( 'wp_enqueue_scripts', 'to_top_script' );
function to_top_script() {
    wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/to-top.js', array( 'jquery' ), '1.0', true );
}

// Add To Top button
add_action( 'genesis_before', 'genesis_to_top');
	function genesis_to_top() {
	 echo '<a href="#0" class="to-top" title="Back To Top">Top</a>';
}

.to-top {
	display:inline-block;
	height:40px;
	width:40px;
	position:fixed;
	bottom:40px;
	right:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	background:rgba(232,98,86,0.8) url(images/to-top.svg) no-repeat center 50%;
	visibility:hidden;
	opacity:0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s;
}

.to-top.top-is-visible {
	visibility:visible;
	opacity:1;
}

.to-top.top-fade-out {
	opacity:.5;
}

.no-touch .to-top:hover {
	background-color:#e86256;
	opacity:1;
}

@media only screen and (min-width: 768px) {
	.to-top {
		right:20px;
		bottom:20px;
	}
}

@media only screen and (min-width: 1024px) {
	.to-top {
		height:60px;
		width:60px;
		right:30px;
		bottom:30px;
	}
}