Scroll back to Top of Page in Galleries

Falcon1 · January 7, 2014

Has anyone tried adding a floating "Back to Top of Page" button so if someone in scrolling down 100+ pictures in a gallery they can at any time click on the "Back to Top of Page" button and it will take them back to the top of the gallery to access the main menu?

My menu is on top and is not fixed to stay no the screen - nor do I want it to. I thought about adding a small side bar menu that stayed on the screen but wasn't sure how to set up a button or link to take me back to the top.

Thanks for your help.

ChancyRat · January 8, 2014

Interesting question. I'm not really a code person, but I did check a little into this because I had html that used the back code, which was Names. In New, Names don't work (I'm pretty sure).

I investigated and have this snippet I need to try. I'm not sure it's 100% "right" or complete. You might test it or wait for someone in the know to comment.

<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>

<p><a href="#news1">Jump to New content 1</a></p>
<p id="news1"><b>New content 1...</b></p>

As for placing it in your left sidebar, that sounds ingenious. You would need to add some blank space vertically so that the Back would be placed in the right place. Not sure how to do that - a box with invisible borders and some kind of forced px height?

Falcon1 · January 15, 2014

Thanks for your reply. I found a guy at work that knows some HTML and CSS code so I'm going to run this past him. I'll post if I find something that works.

Falcon1 · February 12, 2014

I finally had to have Smugmug Super Hero Scott help me. Here is his code below. Works awesome. I tweeked the colors and location a little but this is more than what I asked for. The big to remember is that the HTML code goes on the HTML tab and the CSS code goes on the CSS tab.

HTML:

BACK TO TOP

CSS:
#topButton {
position: fixed;
bottom: 0;
left: 50%;
width: 90px;
margin-left:-45px;
margin-bottom: 12px;
text-align: center;
padding: 10px;
z-index: 9999;
background-color: #202020;
border: 3px solid red;
border-radius: 10px;
}

Darter02 · February 13, 2014

Falcon1 wrote: »

I finally had to have Smugmug Super Hero Scott help me. Here is his code below. Works awesome. I tweeked the colors and location a little but this is more than what I asked for. The big to remember is that the HTML code goes on the HTML tab and the CSS code goes on the CSS tab.

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

CSS:
#topButton {
position: fixed;
bottom: 0;
left: 50%;
width: 90px;
margin-left:-45px;
margin-bottom: 12px;
text-align: center;
padding: 10px;
z-index: 9999;
background-color: #202020;
border: 3px solid red;
border-radius: 10px;
}

How about a link to see it on your site?

ChancyRat · February 13, 2014

Would love to see what you came up with. On this thread: http://www.dgrin.com/showthread.php?t=244999 a solution was offered also, you might want to compare it to yours.

beardedgit · February 13, 2014

FWIW:

<a style="position: fixed; bottom:8px;right:13px;" href="#" title="Back to Top">
<img style="border: none;" src="http://whatever.png" alt="Back to Top" />

Sparky · February 17, 2014

I used the code Falcon1 posted. The only problem is that it is showing up in the light box, shopping cart and even on the customization page. How do you make it appear only in the galleries? I put the HTML block into the "all galleries" section on the customization page.