Page 1 of 1
Back To Top
Posted: Tue Jul 18, 2017 5:46 pm
by Agalassi1792
Hello,
Is there anyway to add an easy 'Back To Top' button at the bottom of all pages on an APWT website?
Re: Back To Top
Posted: Wed Jul 19, 2017 10:14 am
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
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;
}
Re: Back To Top
Posted: Wed Jul 19, 2017 10:41 am
by Agalassi1792
Thanks Paige! This worked. It's good to hear from you again!
Re: Back To Top
Posted: Tue Jan 30, 2018 7:32 pm
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.
Re: Back To Top
Posted: Wed Jan 31, 2018 7:31 am
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.
Re: Back To Top
Posted: Wed Jan 31, 2018 11:15 am
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.
Re: Back To Top
Posted: Wed Jan 31, 2018 12:41 pm
by Jlerskine3444
Hi Brad. I will screen share you. thanks.
Re: Back To Top
Posted: Wed Jan 31, 2018 4:47 pm
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.