richstrauss · May 6, 2020 04:02 · elbert260 · May 6, 2020
diff --git a/floating-back-to-top-button.html b/floating-back-to-top-button.html
 // http://html-tuts.com/back-to-top-button-jquery/
 // Add an anchor link somewhere in your HTML page, by adding a unique class name. 
 // Preferably add it somewhere outside from any containers, so we can add the fixed position to our floating back to top button.

 <a href="#" class="back-to-top">Back to Top</a>
  
 // OR, if you don't have access to html source you can create the link using some jQuery. 
 // Make sure to add the script below above the ending of </body> tag.
 // Don't forget to get jQuery library files and add it above the ending tag of </head>.  

 <script type="text/javascript">
 	$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
 </script>
diff --git a/script.js b/script.js
 // The jQuery
 // Remember that the back to top button has "display: none;" in CSS, to hide it when the page loads. 
 // So, to make it visible when you scroll the page down when need to check, using jQuery, after how many pixels the back to top button should appear. 
 // To do that we need a scroll() function event and an if statement to check the amount scrolled down.

 var amountScrolled = 300;

 $(window).scroll(function() {
 	if ( $(window).scrollTop() > amountScrolled ) {
 		$('a.back-to-top').fadeIn('slow');
 	} else {
 		$('a.back-to-top').fadeOut('slow');
 	}
 });

 // The Animated Effect
 // Now that we have our back to top button in place, we need to add the jQuery animation effect when the page is returning to top. 
 // This must be added on a click event, so when the button is clicked, code should be triggered.

 $('a.back-to-top').click(function() {
 	$('html, body').animate({
 		scrollTop: 0
 	}, 700);
 	return false;
 });
diff --git a/style.css b/style.css
 a.back-to-top {
 	display: none;
 	width: 60px;
 	height: 60px;
 	text-indent: -9999px;
 	position: fixed;
 	z-index: 999;
 	right: 20px;
 	bottom: 20px;
 	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
 	-webkit-border-radius: 30px;
 	-moz-border-radius: 30px;
 	border-radius: 30px;
 }
	// http://html-tuts.com/back-to-top-button-jquery/
	// Add an anchor link somewhere in your HTML page, by adding a unique class name.
	// Preferably add it somewhere outside from any containers, so we can add the fixed position to our floating back to top button.

	<a href="#" class="back-to-top">Back to Top</a>

	// OR, if you don't have access to html source you can create the link using some jQuery.
	// Make sure to add the script below above the ending of </body> tag.
	// Don't forget to get jQuery library files and add it above the ending tag of </head>.

	<script type="text/javascript">
	$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
	</script>
	// The jQuery
	// Remember that the back to top button has "display: none;" in CSS, to hide it when the page loads.
	// So, to make it visible when you scroll the page down when need to check, using jQuery, after how many pixels the back to top button should appear.
	// To do that we need a scroll() function event and an if statement to check the amount scrolled down.

	var amountScrolled = 300;

	$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
	$('a.back-to-top').fadeIn('slow');
	} else {
	$('a.back-to-top').fadeOut('slow');
	}
	});

	// The Animated Effect
	// Now that we have our back to top button in place, we need to add the jQuery animation effect when the page is returning to top.
	// This must be added on a click event, so when the button is clicked, code should be triggered.

	$('a.back-to-top').click(function() {
	$('html, body').animate({
	scrollTop: 0
	}, 700);
	return false;
	});
	a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	}