<a href="#backToTopAnchorPoint" class="backToTopButton">%id=content%</a>

%%[[if preview]]%%
%[if %("%id=source_view%" == "viewsource")% ]%
<div id="Source-Code%id%">
<p>Because you've enabled the <strong>View Generated Source Code</strong> option in the stack settings, the source code for the button is displayed below. The source code for each button comprises of HTML, CSS and jQuery Javascript markup. This code can be pasted into non-Stack page types; like the sidebar of a blog page, a contact form page or other page types. Carefully follow the instructions below to copy and paste the code into the correct locations of your project. This code presented to you below is automatically generated for you, and customised based on any settings you've changed in the stack.</p>

<h4>HTML Code</h4>
<form>
<textarea style="width: 100%; height: 30px;" onclick="this.focus();this.select()" readonly="readonly" class="viewsource-area">
&lt;a href="#backToTopAnchorPoint" class="backToTopButton">%id=content%&lt;/a>
</textarea>
</form>
<p><i>Enter this HTML markup into the main content area or sidebar of a webpage. Do not enter into the custom header field, as this is reserved for other code.</i></p>

<h4>CSS Code</h4>
<form>
<textarea style="width: 100%; height: 200px;" onclick="this.focus();this.select()" readonly="readonly" class="viewsource-area">
#backToTopAnchorPoint {
	display: block;
	height: 0px;
	overflow: hidden;
}

.backToTopButton {
	text-decoration: none;
	color: %id=button_contentcolor_array[0]%;
	%[if %("%id=button_page_placement%" == "fixed")% ]%
	display: none;
	position: fixed;
	z-index: %id=z_index%;
	%[if %("%id=button_position%" == "top_left")% ]%top:%id=margins_array[1]%;left:%id=margins_array[0]%;%[endif]%%[if %("%id=button_position%" == "top_right")% ]%top:%id=margins_array[1]%;right:%id=margins_array[0]%;%[endif]%%[if %("%id=button_position%" == "bottom_left")% ]%bottom:%id=margins_array[1]%;left:%id=margins_array[0]%;%[endif]%%[if %("%id=button_position%" == "bottom_right")% ]%bottom:%id=margins_array[1]%;right:%id=margins_array[0]%;%[endif]%
	%[endif]%
	%[if %("%id=button_page_placement%" == "relative")% ]%
	display: block;
	%[if %id=alignment_array[0]%]%margin-right: auto;%[endif]%%[if %id=alignment_array[1]%]%margin: auto;%[endif]%%[if %id=alignment_array[2]%]%margin-left: auto;%[endif]%
	%[endif]%
	font-size: %id=font_size%px;
	line-height: %id=line_height%em;
	width: %id=button_size_array[0]%px;
	height: %id=button_size_array[1]%px;
	text-align: center;
	border-radius: %id=border_radius%px;
	border: %id=border_weight%px solid %id=border_color[0]%;
	transition: all %id=animation%ms ease-in-out;
}

.backToTopButton:hover {
	border: %id=border_weight%px solid %id=border_color[1]%;
	color: %id=button_contentcolor_array[1]%;
}

%[if %("%id=button_bg%" == "solid")% ]%
/* Solid colour fill */
.backToTopButton {
	background: %id=bg_solid_array[0]%;
}

.backToTopButton:hover {
	background: %id=bg_solid_array[1]%;
}
%[endif]%

%[if %("%id=button_bg%" == "vertical_grad")% ]%
/* Vertical gradient fill */
.backToTopButton {
	background-color: %id=bg_vert_array_top[0]%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(%id=bg_vert_array_top[0]%), to(%id=bg_vert_array_bottom[0]%));
	background-image: -moz-linear-gradient(top, %id=bg_vert_array_top[0]%, %id=bg_vert_array_bottom[0]%);
	background-image: -ms-linear-gradient(top, %id=bg_vert_array_top[0]%, %id=bg_vert_array_bottom[0]%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, %id=bg_vert_array_top[0]%), color-stop(100%, %id=bg_vert_array_bottom[0]%));
	background-image: -webkit-linear-gradient(top, %id=bg_vert_array_top[0]%, %id=bg_vert_array_bottom[0]%);
	background-image: -o-linear-gradient(top, %id=bg_vert_array_top[0]%, %id=bg_vert_array_bottom[0]%);
	background-image: linear-gradient(top, %id=bg_vert_array_top[0]%, %id=bg_vert_array_bottom[0]%);
}

.backToTopButton:hover {
	background-color: %id=bg_vert_array_bottom[1]%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(%id=bg_vert_array_top[1]%), to(%id=bg_vert_array_bottom[1]%));
	background-image: -moz-linear-gradient(top, %id=bg_vert_array_top[1]%, %id=bg_vert_array_bottom[1]%);
	background-image: -ms-linear-gradient(top, %id=bg_vert_array_top[1]%, %id=bg_vert_array_bottom[1]%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, %id=bg_vert_array_top[1]%), color-stop(100%, %id=bg_vert_array_bottom[1]%));
	background-image: -webkit-linear-gradient(top, %id=bg_vert_array_top[1]%, %id=bg_vert_array_bottom[1]%);
	background-image: -o-linear-gradient(top, %id=bg_vert_array_top[1]%, %id=bg_vert_array_bottom[1]%);
	background-image: linear-gradient(top, %id=bg_vert_array_top[1]%, %id=bg_vert_array_bottom[1]%);
}
%[endif]%

%[if %("%id=button_bg%" == "horizontal_grad")% ]%
/* Horizontal gradient fill */
.backToTopButton {
	background-color: %id=bg_hori_array_left[0]%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, right bottom, from(%id=bg_hori_array_left[0]%), to(%id=bg_hori_array_right[0]%));
	background-image: -moz-linear-gradient(left, %id=bg_hori_array_left[0]%, %id=bg_hori_array_right[0]%);
	background-image: -ms-linear-gradient(left, %id=bg_hori_array_left[0]%, %id=bg_hori_array_right[0]%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, %id=bg_hori_array_left[0]%), color-stop(100%, %id=bg_hori_array_right[0]%));
	background-image: -webkit-linear-gradient(left, %id=bg_hori_array_left[0]%, %id=bg_hori_array_right[0]%);
	background-image: -o-linear-gradient(left, %id=bg_hori_array_left[0]%, %id=bg_hori_array_right[0]%);
	background-image: linear-gradient(left, %id=bg_hori_array_left[0]%, %id=bg_hori_array_right[0]%);
}

.backToTopButton:hover {
	background-color: %id=bg_hori_array_left[1]%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, right bottom, from(%id=bg_hori_array_left[1]%), to(%id=bg_hori_array_right[1]%));
	background-image: -moz-linear-gradient(left, %id=bg_hori_array_left[1]%, %id=bg_hori_array_right[1]%);
	background-image: -ms-linear-gradient(left, %id=bg_hori_array_left[1]%, %id=bg_hori_array_right[1]%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, %id=bg_hori_array_left[1]%), color-stop(100%, %id=bg_hori_array_right[1]%));
	background-image: -webkit-linear-gradient(left, %id=bg_hori_array_left[1]%, %id=bg_hori_array_right[1]%);
	background-image: -o-linear-gradient(left, %id=bg_hori_array_left[1]%, %id=bg_hori_array_right[1]%);
	background-image: linear-gradient(left, %id=bg_hori_array_left[1]%, %id=bg_hori_array_right[1]%);
}
%[endif]%

%[if %("%id=button_bg%" == "diag1_grad")% ]%
/* Top left to bottom right diagonal gradient fill */
.backToTopButton {
	background: %id=bg_diag1_topleft[0]%;
	background: -moz-linear-gradient(-45deg,  %id=bg_diag1_topleft[0]% 0%, %id=bg_diag1_lowerright[0]% 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,%id=bg_diag1_topleft[0]%), color-stop(100%,%id=bg_diag1_lowerright[0]%));
	background: -webkit-linear-gradient(-45deg,  %id=bg_diag1_topleft[0]% 0%,%id=bg_diag1_lowerright[0]% 100%);
	background: -o-linear-gradient(-45deg,  %id=bg_diag1_topleft[0]% 0%,%id=bg_diag1_lowerright[0]% 100%);
	background: -ms-linear-gradient(-45deg,  %id=bg_diag1_topleft[0]% 0%,%id=bg_diag1_lowerright[0]% 100%);
	background: linear-gradient(135deg,  %id=bg_diag1_topleft[0]% 0%,%id=bg_diag1_lowerright[0]% 100%);
}

.backToTopButton:hover {
	background: %id=bg_diag1_topleft[1]%;
	background: -moz-linear-gradient(-45deg,  %id=bg_diag1_topleft[1]% 0%, %id=bg_diag1_lowerright[1]% 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,%id=bg_diag1_topleft[1]%), color-stop(100%,%id=bg_diag1_lowerright[1]%));
	background: -webkit-linear-gradient(-45deg,  %id=bg_diag1_topleft[1]% 0%,%id=bg_diag1_lowerright[1]% 100%);
	background: -o-linear-gradient(-45deg,  %id=bg_diag1_topleft[1]% 0%,%id=bg_diag1_lowerright[1]% 100%);
	background: -ms-linear-gradient(-45deg,  %id=bg_diag1_topleft[1]% 0%,%id=bg_diag1_lowerright[1]% 100%);
	background: linear-gradient(135deg,  %id=bg_diag1_topleft[1]% 0%,%id=bg_diag1_lowerright[1]% 100%);
}
%[endif]%

%[if %("%id=button_bg%" == "diag2_grad")% ]%
/* Bottom left to top right diagonal gradient fill */
.backToTopButton {
	background: %id=bg_diag2_lowerleft[0]%;
	background: -moz-linear-gradient(45deg, %id=bg_diag2_lowerleft[0]% 0%, %id=bg_diag2_topright[0]% 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,%id=bg_diag2_lowerleft[0]%), color-stop(100%,%id=bg_diag2_topright[0]%));
	background: -webkit-linear-gradient(45deg, %id=bg_diag2_lowerleft[0]% 0%,%id=bg_diag2_topright[0]% 100%);
	background: -o-linear-gradient(45deg, %id=bg_diag2_lowerleft[0]% 0%,%id=bg_diag2_topright[0]% 100%);
	background: -ms-linear-gradient(45deg, %id=bg_diag2_lowerleft[0]% 0%,%id=bg_diag2_topright[0]% 100%);
	background: linear-gradient(45deg, %id=bg_diag2_lowerleft[0]% 0%,%id=bg_diag2_topright[0]% 100%);
}

.backToTopButton:hover {
	background: %id=bg_diag2_lowerleft[1]%;
	background: -moz-linear-gradient(45deg, %id=bg_diag2_lowerleft[1]% 0%, %id=bg_diag2_topright[1]% 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,%id=bg_diag2_lowerleft[1]%), color-stop(100%,%id=bg_diag2_topright[1]%));
	background: -webkit-linear-gradient(45deg, %id=bg_diag2_lowerleft[1]% 0%,%id=bg_diag2_topright[1]% 100%);
	background: -o-linear-gradient(45deg, %id=bg_diag2_lowerleft[1]% 0%,%id=bg_diag2_topright[1]% 100%);
	background: -ms-linear-gradient(45deg, %id=bg_diag2_lowerleft[1]% 0%,%id=bg_diag2_topright[1]% 100%);
	background: linear-gradient(45deg, %id=bg_diag2_lowerleft[1]% 0%,%id=bg_diag2_topright[1]% 100%);
}
%[endif]%

%[if %("%id=button_bg%" == "radial_grad")% ]%
/* Radial gradient fill */
.backToTopButton {
	background: %id=bg_radial_middle[0]%;
	background: -moz-radial-gradient(center, ellipse cover,  %id=bg_radial_middle[0]% 0%, %id=bg_radial_outside[0]% 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,%id=bg_radial_middle[0]%), color-stop(100%,%id=bg_radial_outside[0]%));
	background: -webkit-radial-gradient(center, ellipse cover, %id=bg_radial_middle[0]% 0%,%id=bg_radial_outside[0]% 100%);
	background: -o-radial-gradient(center, ellipse cover, %id=bg_radial_middle[0]% 0%,%id=bg_radial_outside[0]% 100%);
	background: -ms-radial-gradient(center, ellipse cover, %id=bg_radial_middle[0]% 0%,%id=bg_radial_outside[0]% 100%);
	background: radial-gradient(ellipse at center, %id=bg_radial_middle[0]% 0%,%id=bg_radial_outside[0]% 100%);
}

.backToTopButton:hover {
	background: %id=bg_radial_inside[1]%;
	background: -moz-radial-gradient(center, ellipse cover,  %id=bg_radial_inside[1]% 0%, %id=bg_radial_outside[1]% 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,%id=bg_radial_inside[1]%), color-stop(100%,%id=bg_radial_outside[1]%));
	background: -webkit-radial-gradient(center, ellipse cover, %id=bg_radial_inside[1]% 0%,%id=bg_radial_outside[1]% 100%);
	background: -o-radial-gradient(center, ellipse cover, %id=bg_radial_inside[1]% 0%,%id=bg_radial_outside[1]% 100%);
	background: -ms-radial-gradient(center, ellipse cover, %id=bg_radial_inside[1]% 0%,%id=bg_radial_outside[1]% 100%);
	background: radial-gradient(ellipse at center, %id=bg_radial_inside[1]% 0%,%id=bg_radial_outside[1]% 100%);
}
%[endif]%

%[if %("%id=button_bg%" == "draggeddropped")% ]%
/* Local image image applied as a CSS background */
.backToTopButton {
	background: url(%id=local_image_static%);
	background-size: %id=localimage_sizing%;
}
%[endif]%

%[if %("%id=button_bg%" == "warehoused")% ]%
/* Warehoused image applied as a CSS background */
.backToTopButton {
	background: url(%id=warehoused_image_static -href%);
	background-size: %id=warehouseimage_sizing%;
}
%[endif]%

@media print {
	/* Hides the button if the page is printed or saved as a PDF */
	.backToTopButton {
		display: none;
	}
}
</textarea>
</form>
<p><i>Enter this CSS into the Custom CSS box in RapidWeaver or the custom.css file in your theme. Any surplus whitespace within the generated output can be safely deleted.</i></p>

<h4>jQuery Javascript</h4>
<form>
<textarea style="width: 100%; height: 200px;" onclick="this.focus();this.select()" readonly="readonly" class="viewsource-area">
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">&lt;/script>
&lt;script>
%[if %("%id=button_page_placement%" == "fixed")% ]%$(document).ready(function(){
	$('body').prepend('&lt;div id="backToTopAnchorPoint">The point Back To Top stack will scroll to&lt;/div>');
	$('.backToTopButton').appendTo('body');
	$(window).scroll(function () {
			if ($(this).scrollTop() > %id=offset%) {
					$('.backToTopButton').fadeIn(0);
			} else {
					$('.backToTopButton').fadeOut(0);
			}
    });
    $('.backToTopButton').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
			|| location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			   if (target.length) {
				 $('html,body').animate({
					 scrollTop: target.offset().top
				}, %id=scroll_speed%);
				return false;
			}
		}
	});
});%[endif]%
%[if %("%id=button_page_placement%" == "relative")% ]%$(document).ready(function(){
	$('.backToTopButton').appendTo('body');
});%[endif]%
&lt;/script>
</textarea>
</form>
<p><i>Enter this into the Custom Header box in the RapidWeaver Page Inspector. The location or version of jQuery called may be customised.</i></p>

</div>
%[endif]%
%%[[endif]]%%

%%[[if !edit]]%% 
<!-- Demo stack. Credit to remain on display at ALL times. If you like this stack, then please buy a copy of it. -->
<div style="position:fixed;bottom:0;left:0;z-index:999999;font-family:monospace;font-size:13px;color:#fff;background:#000;padding:0.5rem;">This webpage uses the free demo version of %stackTitle% v%stackVersion%</div>
%%[[endif]]%%