Example

When you scroll this webpage down. You will see a black button appear towards the bottom right of the screen. This is the BackToTop stack. Clicking the button scrolls you back up. BackToTop stacks are automatically hidden if the webpage is printed or saved as a PDF.

Setup

Follow these instructions for using BackToTop.
  1. Install the stack into Stacks and RapidWeaver, in the normal way.
  2. Open your Stacks Library.
  3. Drag and drop a copy of BackToTop into the webpage.
  4. With the BackToTop stack selected in edit mode, you can access all of its settings in the Stacks side panel.
  5. Design the button to any shape, size, position of colour you want, using the provided settings.
  6. Preview your webpage to see the finished result.

Like most stacks, all the settings have information tooltips, when you mouseover them. These tooltips provide information about what each setting does.

Font Awesome Icons

By default, BackToTop stack uses Font Awesome Icons. As of Stacks version 4 and less, the Stacks plugin uses Font Awesome Icons version 4.7. You can find the Font Awesome 4.7 reference guide here:
https://fontawesome.com/v4.7.0/icons/

If you want to change the icon used to something else, then replace the existing Icon Content of <i class="fa fa-caret-up"></i> with your preferred icon markup. For example, if you are using a ThemeFlood theme that includes a newer version of Font Awesome Icons, you can adjust the icon markup accordingly.

Using BackToTop in other page types

BackToTop is a stack element, and therefore only works in a Stacks page type. Ordinarily it will not work in other webpages, like the Blog, Photo Album, Markdown, Styled Text or a RapidWeaver Contact Form. To other come this limitation, BackToTop has a special checkbox option marked View Generated Source Code. With this option checked, you can switch RapidWeaver into Preview Mode and view the CSS, HTML and Javascript code required to generate your button. The code will look a little something like this...

HTML:

<a href="#backToTopAnchorPoint" class="backToTopButton"><i class="fa fa-caret-up"></i></a>

CSS:

#backToTopAnchorPoint {
	display: block;
	height: 0px;
	overflow: hidden;
}

.backToTopButton {
	text-decoration: none;
	color: #FFFFFF;
	display: none;
	position: fixed;
	z-index: 999;
	bottom:150px;right:50px;
	font-size: 43px;
	line-height: 1.00em;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 1.00);
	transition: all 300ms ease-in-out;
}

.backToTopButton:hover {
	border: 1px solid rgba(0, 0, 0, 1.00);
	color: #CCCCCC;
}

.backToTopButton {
	background-color: rgba(102, 102, 102, 1.00);
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(102, 102, 102, 1.00)), to(rgba(25, 25, 25, 1.00)));
	background-image: -moz-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -ms-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(102, 102, 102, 1.00)), color-stop(100%, rgba(25, 25, 25, 1.00)));
	background-image: -webkit-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -o-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
}

.backToTopButton:hover {
	background-color: rgba(25, 25, 25, 1.00);
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(102, 102, 102, 1.00)), to(rgba(25, 25, 25, 1.00)));
	background-image: -moz-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -ms-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(102, 102, 102, 1.00)), color-stop(100%, rgba(25, 25, 25, 1.00)));
	background-image: -webkit-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: -o-linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
	background-image: linear-gradient(top, rgba(102, 102, 102, 1.00), rgba(25, 25, 25, 1.00));
}

@media print {
	/* Hides the button if the page is printed or saved as a PDF */
	.backToTopButton {
		display: none;
	}
}

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('body').prepend('<div id="backToTopAnchorPoint">The point BackToTop stack will scroll to</div>');
	$('.backToTopButton').appendTo('body');
	$(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            $('.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
				}, 500);
				return false;
			}
		}
	});
});
</script>