Hello,
Is there anyway to add an easy 'Back To Top' button at the bottom of all pages on an APWT website?
Back To Top
- Agalassi1792
- AllPro Expert
- Posts: 510
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
- Paige
- 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
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:
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:
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>
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;
}
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
- Jlerskine3444
- AllPro Provider
- Posts: 34
- Joined: Tue Jan 02, 2018 11:43 am
- Website: www.myvrhm.com
Re: Back To Top
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 (31.87 KiB) Viewed 6124 times
-
- footer_BackToTheTop_APWT.PNG (36.8 KiB) Viewed 6124 times
- Jlerskine3444
- AllPro Provider
- Posts: 34
- Joined: Tue Jan 02, 2018 11:43 am
- Website: www.myvrhm.com
Re: Back To Top
Update: The back to the top icon only shows up on my Ipad Pro. Does not show on computer, and android or IOS phone.
- Brads326
- Support Team
- Posts: 179
- Joined: Tue Dec 12, 2017 10:06 am
- Website: www.allprowebtools.com
Re: Back To Top
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.
- Jlerskine3444
- AllPro Provider
- Posts: 34
- Joined: Tue Jan 02, 2018 11:43 am
- Website: www.myvrhm.com
Re: Back To Top
Hi Brad. I will screen share you. thanks.
- Jlerskine3444
- AllPro Provider
- Posts: 34
- Joined: Tue Jan 02, 2018 11:43 am
- Website: www.myvrhm.com
Re: Back To Top
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.
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.