Back To Top

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Back To Top

Post by Agalassi1792 »

Hello,

Is there anyway to add an easy 'Back To Top' button at the bottom of all pages on an APWT website?
User avatar
Paige
Support Team
Support Team
Posts: 461
Joined: Fri Feb 24, 2012 3:41 am
Website: www.allprowebtools.com
Location: Fort Collins, CO
Contact:

Re: Back To Top

Post by Paige »

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 :D

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;
}
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Back To Top

Post by Agalassi1792 »

Thanks Paige! This worked. It's good to hear from you again!
User avatar
Jlerskine3444
AllPro Provider
AllPro Provider
Posts: 34
Joined: Tue Jan 02, 2018 11:43 am
Website: www.myvrhm.com

Re: Back To Top

Post by Jlerskine3444 »

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.
Attachments
stylesheet_BackToTheTop_code_APWT.PNG
stylesheet_BackToTheTop_code_APWT.PNG (31.87 KiB) Viewed 6050 times
footer_BackToTheTop_APWT.PNG
footer_BackToTheTop_APWT.PNG (36.8 KiB) Viewed 6050 times
User avatar
Jlerskine3444
AllPro Provider
AllPro Provider
Posts: 34
Joined: Tue Jan 02, 2018 11:43 am
Website: www.myvrhm.com

Re: Back To Top

Post by Jlerskine3444 »

Update: The back to the top icon only shows up on my Ipad Pro. Does not show on computer, and android or IOS phone.
User avatar
Brads326
Support Team
Support Team
Posts: 179
Joined: Tue Dec 12, 2017 10:06 am
Website: www.allprowebtools.com

Re: Back To Top

Post by Brads326 »

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.
User avatar
Jlerskine3444
AllPro Provider
AllPro Provider
Posts: 34
Joined: Tue Jan 02, 2018 11:43 am
Website: www.myvrhm.com

Re: Back To Top

Post by Jlerskine3444 »

Hi Brad. I will screen share you. thanks.
User avatar
Jlerskine3444
AllPro Provider
AllPro Provider
Posts: 34
Joined: Tue Jan 02, 2018 11:43 am
Website: www.myvrhm.com

Re: Back To Top

Post by Jlerskine3444 »

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.
Post Reply