Back To Top

Hello,

Is there anyway to add an easy 'Back To Top' button at the bottom of all pages on an APWT website?

Sure this is very simple to do by adding just a little bit of code to your site! If you have any questions feel free to ask

Add the following code to the top of your Footer template, which you can find by going to Settings > Administrator > Theme Editor > Footer:

Code: Select all

	<p id="back-top"> <a href="#top"><span></span></a> </p>
	
	<script type="text/javascript">
	jQuery(document).ready(function(){
	var IE='\v'=='v';
	// hide #back-top first
	jQuery("#back-top").hide();
	// fade in #back-top
	jQuery(function () {
		jQuery(window).scroll(function () {
			if (!IE) {
				if (jQuery(this).scrollTop() > 100) {
					jQuery('#back-top').fadeIn();
				} else {
					jQuery('#back-top').fadeOut();
				}
			}
			else {
				if (jQuery(this).scrollTop() > 100) {
					jQuery('#back-top').show();
				} else {
					jQuery('#back-top').hide();
				}
			}
		});

		// scroll body to 0px on click
		jQuery('#back-top a').click(function () {
			jQuery('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
	</script>

Add the following to your stylesheet, which you can find by going to Settings > Administrator > Theme Editor > Stylesheet, feel free to customize any of the colors:

Code: Select all

#back-top {
	position: fixed;
	bottom: 30px;
	z-index:9999;
	left:50%;
	margin-left:640px;
}
#back-top a:hover {
	color:#8db699;
}
#back-top span {
	width:26px;
	height:26px;
	display: block;
	margin-bottom: 7px;
}
#back-top span:before {
	content:'\e113';
	font-family: 'Glyphicons Halflings';
	background-color:#6eb032;
	color:#fff;
	font-size:25px;
	line-height:38px;
	width:41px;
	height:41px;
	display: block;
	text-align:center;
	border-radius:41px;
	-moz-border-radius:41px;
	-webkit-border-radius:41px;
}
#back-top a:hover span:before {
	background-color:#8db699;
}

Thanks Paige! This worked. It's good to hear from you again!

Hi - I added the the suggested code to my footer and stylesheet as recommended. Does not show up on my website, please help. I have attached both code suggestions as is, currently saved in both location.

Update: The back to the top icon only shows up on my Ipad Pro. Does not show on computer, and android or IOS phone.

I wanted to let you know that I tested your website on chorme, firefox, and opera on a computer desktop and I see your button on the website. I think at this point we are going to need a little more information about your issue or possibly do a screen share so we can see this problem first hand.

Hi Brad. I will screen share you. thanks.

Dave and Brad - Thank you for looking into this for me. I figured out the reason for the issue on my end. Dave you were on the right track when we screened shared.

Problem: I must have my screen view point at 90% or lower in order for the back to the top button appear. In addition, If I maximize the screen, I must also, ensure that it is not at 100% or greater.

I am assuming this has a lot to do with the screen size, if I was to hook up a secondary monitor, I would not have to worry about seeing the screen at a 100% or greater view point. I am just to lazy to hook up the other monitor, I guess I think my eyesight is the same as it was 30 years ago when I was 18.