back to top code

TallPhotoGuy · April 15, 2014

wowography wrote: »

Thanks for the feedback, Oops..I did not realize this page was built using different theme. I have corrected & thanks again!

MakeMeShutter wrote: »

Beautiful site, love the home page!
I had a very hard time reading the white text on your about page with that particular background.
I also love the "back to top" button at the bottom of your gallery images. I wish SmugMug would implement this as well.

Let's try this again.

Where can one get the back to top code

Thanks

RobLoud · April 15, 2014

TallPhotoGuy wrote: »

Where can I get your back to the top CSS code. Thanks

Try adding this to a HTML block on the page(s) that you require a 'Back to Top'.... you will need to insert your own image link into the code (I have left mine in as reference).
You can either create your own image in Photoshop or download a image from google images.

[HTML]<a style="position: fixed; bottom:5px; right:30px;" href="#" title="Back to Top"><img style="border: none;" src="http://www.kingswoodphotography.co.uk/photos/i-CshcT6Q/0/Ti/i-CshcT6Q-Ti.png" alt="image" /></a>[/HTML]

Adjust your bottom and right margin to suit..... you can change the right to either left or center (your choice).

Robin

Allen · April 15, 2014

Here's a version.
Add this to an html block at the top.

<div id="topButton">
<a href="#top">BACK TO TOP</a>
</div>

Add this to the blocks CSS tab.

#topButton {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 90px;
  margin-left: -45px;
  margin-bottom: 12px;
  text-align: center;
  padding: 2px 10px;
  z-index: 9999;
  background-color: rgba(22, 22, 22, .50);
  border: 2px solid  rgba(255, 255, 255, .50);
  border-radius: 10px;
}

I add this to only pages I want it on not whole site.
You can see it in action on my homepage. Even works on my iPhone which is
a bitch scrolling back to the top.

TallPhotoGuy · April 15, 2014

Thanks, will give it a try.

I know there is code referenced in some of the sticky links. Would it be possible to have a user contributed library where code like this is placed. There is a ton of good code in the various threads that unless you really search or know it's there for the most part is not known

Allen · April 22, 2014

I've added the Back To Top button to a few collage style galleries. Works great, even on my iPhone.

Problem is it hides in lightbox view for every gallery but it doesn't hide on my homepage in lightbox.

I can not find a class to hide it on my homepage lightbox.
Any solution?

leftquark · April 22, 2014

Allen wrote: »

I've added the Back To Top button to a few collage style galleries. Works great, even on my iPhone.

Problem is it hides in lightbox view for every gallery but it doesn't hide on my homepage in lightbox.

I can not find a class to hide it on my homepage lightbox.
Any solution?

For your topButton CSS, change the z-index from 9999 to 1. By setting it to 9999 you're having it always displayed in front of the lightbox. By setting it to 1 you make it so it's on top of the homepage images but behind the lightbox.

Allen · April 22, 2014

leftquark wrote: »

For your topButton CSS, change the z-index from 9999 to 1. By setting it to 9999 you're having it always displayed in front of the lightbox. By setting it to 1 you make it so it's on top of the homepage images but behind the lightbox.

Thanks, I set it to 90 and it works hiding it in lightbox.

Just noticed that the galleries where it worked ok had it set to 99.

dberthia · April 22, 2014

This worked great for me in Preview mode, Unfortunately, when I exited the Preview and tried to find the new HTML block on the page to edit it, I could not find it. Any idea how to re-locate the HTML block I placed on the page? It doesn't seem to be where I placed it.

leftquark · April 22, 2014

dberthia wrote: »

This worked great for me in Preview mode, Unfortunately, when I exited the Preview and tried to find the new HTML block on the page to edit it, I could not find it. Any idea how to re-locate the HTML block I placed on the page? It doesn't seem to be where I placed it.

You'll only see the edit blocks when you're in customize mode. If you publish it, it should show up when you go to the page. Sometimes when I go back into customize mode it becomes really hard to find the content block I placed. The easiest way to find them is to look at the customize sidebar (usually on the right, where it says "Homepage", "All Folders", "Entire Site", etc) and make sure you're on the "Content" tab. It should have a listing of all the content blocks above the "Add Content Block" text. You can find the "HTML" block and click the little wrench so you can edit it again.

Soul Gaze Photography · April 23, 2014

Thank you Allen for posting your code. I'd been using a text version of the return to top function, but much prefer this now that I've modified it to match my site.

Allen · April 23, 2014

Soul Gaze Photography wrote: »

Thank you Allen for posting your code. I'd been using a text version of the return to top function, but much prefer this now that I've modified it to match my site.

Your "back to top" is partly hidden on smaller screen sizes less the about 1480px wide.

Soul Gaze Photography · April 23, 2014

Allen wrote: »

Your "back to top" is partly hidden on smaller screen sizes less the about 1480px wide.

I noticed that too after I posted. I believe it's fixed now according to my testing in Screenfly and my own devices. Thank you Allen, just in case I'd not noticed!

dberthia · April 24, 2014

leftquark wrote: »

You'll only see the edit blocks when you're in customize mode. If you publish it, it should show up when you go to the page. Sometimes when I go back into customize mode it becomes really hard to find the content block I placed. The easiest way to find them is to look at the customize sidebar (usually on the right, where it says "Homepage", "All Folders", "Entire Site", etc) and make sure you're on the "Content" tab. It should have a listing of all the content blocks above the "Add Content Block" text. You can find the "HTML" block and click the little wrench so you can edit it again.

Thank you!

Darter02 · April 26, 2014

@ Allen, I was experimenting using your exact code. I get the same button as you created on my experimental gallery, which is a landscape collage. When I open an image in the light-box, it's still present. I looked at your Butterflies gallery, which has the button. When I open an image on your site, the button is not in the lightbox.

Is there an additional CSS code needed to make it disappear?

Nice gallery BTW.

ChancyRat · April 26, 2014

leftquark wrote: »

You'll only see the edit blocks when you're in customize mode. If you publish it, it should show up when you go to the page. Sometimes when I go back into customize mode it becomes really hard to find the content block I placed. The easiest way to find them is to look at the customize sidebar (usually on the right, where it says "Homepage", "All Folders", "Entire Site", etc) and make sure you're on the "Content" tab. It should have a listing of all the content blocks above the "Add Content Block" text. You can find the "HTML" block and click the little wrench so you can edit it again.

One other little thing that happens:
I added the HTML block for this code, and then did some editing on other blocks. While still in customize mode I then couldn't find the new html block (on the page) to continue editing. On the right-side flyout it showed as the last block in the long list. I expected to see it at the top of the list, corresponding to where it lives on the main page.

After I did Done/Publish, and went back into customize mode, the block had moved to the top of the list on the right-side flyout, where it belonged.

ChancyRat · April 26, 2014

Thank you Allen!
This is my version; I opted to put it on the far right, hope I did the code tweaks right to achieve that in the most efficient manner: http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks

It's interesting that once one clicks the button, the URL adds the top code (#top) which stays in place until one leaves the page and re-enters it. I wonder if that matters if someone copies the URL with #top and sends that out to the world...

<div id="topButton">
<a href="#top">Back to Top</a>
</div>

#topButton {
position: fixed;
bottom: 0;
left: 92%;
width: 70px;
margin-left: -40px;
margin-bottom: 12px;
text-align: center;
padding: 2px 10px;
z-index: 9999;
background-color: rgba(109, 177, 255, .50);
border: 2px solid rgba(255, 255, 255, .80);
border-radius: 10px;
}

Allen · April 27, 2014

Darter02 wrote: »

@ Allen, I was experimenting using your exact code. I get the same button as you created on my experimental gallery, which is a landscape collage. When I open an image in the light-box, it's still present. I looked at your Butterflies gallery, which has the button. When I open an image on your site, the button is not in the lightbox.

Is there an additional CSS code needed to make it disappear?

Nice gallery BTW.

Change the z-index from 9999 to 99. That worked for me.

dberthia · April 27, 2014

I ended-up creating a more subtle version for my site. I changed it to an arrow and moved it to the lower right corner of the page. You will see "Back to Top" as a tooltip when you hover over the arrow. You can see it here.

Here's the HTML:

<div id="topButton">
	<a href="#top" title="Back to Top">&#x25b2;</a>
</div>

Here's the CSS:

#topButton {
  position: fixed;
  bottom: 0;
  width: 20px;
  left: 97.5%;
  margin: 0 0 12px 0;
  text-align: center;
  padding: 0;
  z-index: 1;
  background-color: rgba(22, 22, 22, .50);
  border: 2px solid  rgba(255, 255, 255, .50);
  border-radius: 10px;
}

Darter02 · April 27, 2014

Thanks Allen. I just worked that into my galleries. I too made an arrow button, only larger so I can hit on mobile. On a small screen, like my Droid, I can't see it. On a Samsung Galaxt Tab I can see 1/2 of it. I'll have to play around with it more.

Allen · April 27, 2014

Darter02 wrote: »

Thanks Allen. I just worked that into my galleries. I too made an arrow button, only larger so I can hit on mobile. On a small screen, like my Droid, I can't see it. On a Samsung Galaxt Tab I can see 1/2 of it. I'll have to play around with it more.

Looks like it's large enough to add "TOP" word to it. Maybe vertical on top of the arrow.

ChancyRat · April 27, 2014

Darter02 wrote: »

Thanks Allen. I just worked that into my galleries. I too made an arrow button, only larger so I can hit on mobile. On a small screen, like my Droid, I can't see it. On a Samsung Galaxt Tab I can see 1/2 of it. I'll have to play around with it more.

Very pretty - but, invisible mostly at least on what I see.

ChancyRat · April 27, 2014

How can I remove the border completely? I tried removing relevant code and it won't go away.
I put an arrow image on my home page, which looks fine except for the border.
My effort at the code:

#topButton {
position: fixed;
bottom: 0;
width: 40px;
height:32px;
left: 94%;
margin: 0 0 12px 0;
text-align: center;
padding: 0;
z-index: 1;
background-color: rgba(252, 237, 171, 0);
/* border: 2px solid rgba(255, 255, 255, ..5); */
/* border-radius: 10px; */
}

<div id="topButton">
<a href="#top" title="Back to Top"><div style="text-align: center;"><img src="/photos/i-tpmhm...g" alt="image" height="50%" width="50%" /></div></a>
</div>

Thankssss

Oops, left out the link: http://www.joinrats.com/

Allen · April 27, 2014

Darter02 · April 27, 2014

I set the border radius to zero. I'm guessing you can also just delete the line of code. I kept it as I may want to modify it at a later date.

border: 0px

Allen · April 27, 2014

Images sometimes carry their own border, see my last post.

Darter02 · April 27, 2014

ChancyRat wrote: »

Very pretty - but, invisible mostly at least on what I see.

I just modified it and then saw your post. Now it looks like this. I'm most likely going to mess with it more later this week.

Darter02 · April 27, 2014

Allen wrote: »

Images sometimes carry their own border, see my last post.

I forgot some folks add borders to their images! My bad...

ChancyRat · April 27, 2014

Thanks, I figured out if I left in the border line but set it to zero, the border disappears. And, I couldn't help myself in the image choice, had to switch it to something - um - theme-relevant.

http://www.joinrats.com/

A bit of humor for your day.

ChancyRat · April 27, 2014

Darter02 wrote: »

I just modified it and then saw your post. Now it looks like this. I'm most likely going to mess with it more later this week.

That looks nice!

ChancyRat · April 27, 2014

Allen wrote: »

Here's a version.
Add this to an html block at the top.

<div id="topButton">
<a href="#top">BACK TO TOP</a>
</div>

Thanks Allen for the bit that adds the pop-up text; made my day.

leftquark · April 29, 2014

I took your awesome code and modified it to be an up arrow, similar to above:
http://www.aaronmphotography.com/Events/Weddings/Chris-and-Sarah-2013/

up_arrow.gif

HTML:
Note: Your code requires the HTML content block be placed at that TOP of the page. Using this code, it can be anywhere.

<div id="topButton">
<a href="#sm-page-content">Back To Top</a>
</div>

And the CSS:

#topButton {
  position: fixed;
  bottom: 3px;
  left: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 90;
  width: 50px;
  height: 50px;
  padding-top: 12px;
  background: rgba(0, 0, 0, 0.73);
  border-radius: 5px;
  -webkit-transition: opacity 400ms ease 0, visibility 0ms linear 500ms;
  -moz-transition: opacity 400ms ease 0, visibility 0ms linear 500ms;
  transition: opacity 400ms ease 0, visibility 0ms linear 500ms;
}

#topButton a {
  display: block;
  overflow: hidden;
  line-height: 400px;
  position: relative;
  left: 50%;
  width: 24px;
  margin-left: -12px;
  height: 29px;
  background: url(http://www.aaronmphotography.com/photos/i-bnLVMj6/0/O/i-bnLVMj6.png) 0 0 no-repeat;
  margin-bottom: 5px;
}

#topButton:hover {
  background: rgba(0, 0, 0, 0.85);
}

back to top code

Comments