NEW: "Back to Top" Button

leftquark · April 8, 2016

Large galleries with lots of photos in Journal, Collage, or Thumbnail style can be a bit of a pain when you start scrolling down through the photos and want to jump back to the top of the Gallery. Well today we're here with some Advil to wash away that pain, with the new "Back to Top" Button!

Now, once you scroll behind twice the height of the browser window, we'll display a small "Back to Top" button in the lower right corner. Clicking on it will return you to the top of the page with a fancy scrolling up animation.

The button will disappear if you scroll above twice the height of the browser. For example, if your browser is 400px tall, we'll start displaying the "Back to Top" beyond 800px. If you scroll to 799px down, the button will disappear.

For those of you that have already built a custom "Back to Top" button using HTML, you can take advantage of the fancy animation by just adding this class to your link: sm-page-scroll-to-top.

example:

<a href="#backtotop" class="sm-page-scroll-to-top">Back to Top</a>

sarasphotos · April 8, 2016

Finally! Thanks for this!

Cheers, Sara

Richard · April 8, 2016

I like the back to top function, but I don't particularly care for the scrolling behavior. Hoping someone will post some CSS that overrides the animation parameters so that it just jumps to the top. Matter of taste, I suppose.

photoclick · April 8, 2016

I actually noticed it before this announcement and had to browse a few different sites to make sure I am not "seeing" things

It looks good, unobtrusive, blends very well with site colors. Works on mobile too. Thank you.

Allen · April 8, 2016

Great! Now I have two "Back to the Top" buttons. I looked at photoclick's button yesterday and found it
very erratic and too large covering too much of photos.

Looks like the new one is in a div with no ID. Please add an ID to the div so we can remove it.
Especially on mobile.

denisegoldberg · April 8, 2016

Thank you, I like it!

--- Denise

photoclick · April 8, 2016

Allen wrote: »

Great! Now I have two "Back to the Top" buttons. I looked at photoclick's button yesterday and found it
very erratic and too large covering too much of photos.

Looks like the new one is in a div with no ID. Please add an ID to the div so we can remove it.
Especially on mobile.

The outer container div has no ID nor class name - you are correct here. But the actual button can be targeted by class name "sm-page-scroll-to-top".

Allen · April 8, 2016

photoclick wrote: »

The outer container div has no ID nor class name - you are correct here. But the actual button can be targeted by class name "sm-page-scroll-to-top".

Yes, I can hide the new button, but that class name is somehow applied to my button which is just
a widget. I had to add "height" otherwise my button shrunk to 1px high. The text also is gone. And
when I add a height the whole button shows but text disappears.

I added the class to this in the widget and the page scroll works like the new button.

<div id="..." class="... sm-page-widget-5014608" ...>
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-z6pC3BVf" class="sm-page-widget-body">
            <div id="topButton">
               <a href="#top"[COLOR=Red] class="sm-page-scroll-to-top"[/COLOR]>BACK TO TOP</a>
            </div>
        </div>
        <div class="sm-page-widget-footer"></div>
    </div>
</div>

CSS in html widget tab

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

Finally figured it out. Have to further specify class and add .sm-button to rule.

/* Smug back to top button */
.sm-button.sm-page-scroll-to-top {display:none}

brandofamily · April 9, 2016

Allen wrote: »
Yes, I can hide the new button, but that class name is somehow applied to my button which is just
a widget. I had to add "height" otherwise my button shrunk to 1px high. The text also is gone. And
when I add a height the whole button shows but text disappears.

I added the class to this in the widget and the page scroll works like the new button.
<div id="..." class="... sm-page-widget-5014608" ...>
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-z6pC3BVf" class="sm-page-widget-body">
            <div id="topButton">
               <a href="#top"[COLOR=Red] class="sm-page-scroll-to-top"[/COLOR]>BACK TO TOP</a>
            </div>
        </div>
        <div class="sm-page-widget-footer"></div>
    </div>
</div>
CSS in html widget tab
#topButton {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 90px;
  margin-left: -45px;
  margin-bottom: 12px;
  text-align: center;
  padding: 2px 10px;
  z-index: 99;
  background-color: rgba(22, 22, 22, .50);
  border: 2px solid  rgba(255, 255, 255, .50);
  border-radius: 10px;
  height: 18px;
}
Finally figured it out. Have to further specify class and add .sm-button to rule.

/* Smug back to top button */
.sm-button.sm-page-scroll-to-top {display:none}

Allen, did you add the last bit of code to remove the SM "to the top" button"? I am seeing 2 buttons on your home page.
I added just the last bit you listed

/* Smug back to top button */
.sm-button.sm-page-scroll-to-top {display:none}

and my button seems to continue working but the SM button is gone. Was I supposed to add more than that bit?

Allen · April 9, 2016

brandofamily wrote: »
Allen, did you add the last bit of code to remove the SM "to the top" button"? I am seeing 2 buttons on your home page.
I added just the last bit you listed
/* Smug back to top button */
.sm-button.sm-page-scroll-to-top {display:none}
and my button seems to continue working but the SM button is gone. Was I supposed to add more than that bit?

I only have the Back to Top button on a few pages in html widgets, forgot to do my homepage. I
added the removal CSS "all galleries" so just switched it to "entire site".
example: homepage now works. Gallery example:
http://www.photosbyat.com/FloraandFungi/Flowers/

phaserbeam · April 9, 2016

Thanks for this new "feature"... disabled because i had such a button for a loooong long time. And i like my type of button more.

P.S. What i really didn't like is that this is the 2nd "update" this year that affected the look of my site. I'm pretty sure the SmugMug team did know that some users had such a button already. Instead of add a feature that is disabled by default in gallery settings they enabled it for every user. I'm sure me was not the only one having two buttons on the page.

There must have been another change in the past few weeks/months that changed something that affected my menus (menus appear below the gallery-slideshow and the journal styled galleries, means the photo "layer" was shown above the vertical bar 2nd-level menus).

Is there any newsletter that will inform the site-owners about changes that could affect the existing look'n'feel of the site or about changes that could affect existing CSS code?

leftquark · April 10, 2016

phaserbeam wrote: »

P.S. What i really didn't like is that this is the 2nd "update" this year that affected the look of my site. I'm pretty sure the SmugMug team did know that some users had such a button already. Instead of add a feature that is disabled by default in gallery settings they enabled it for every user. I'm sure me was not the only one having two buttons on the page.

I'm one of you guys who had to go in and remove an Advanced Customization that I had added, so I symphathize, but we have to always make SmugMug better for the majority of our users who wouldn't want to go in and have to toggle this on for every gallery. We're also looking to avoid the issue of "option overload" and some features, like this, will be engrained within SmugMug.

phaserbeam wrote: »

There must have been another change in the past few weeks/months that changed something that affected my menus (menus appear below the gallery-slideshow and the journal styled galleries, means the photo "layer" was shown above the vertical bar 2nd-level menus).

There shouldn't have been anything that effected menus, slideshows or gallery styles within the last few months. Do you have an example I can look at so I can dig further?

phaserbeam wrote: »

Is there any newsletter that will inform the site-owners about changes that could affect the existing look'n'feel of the site or about changes that could affect existing CSS code?

We're always looking to improve the way SmugMug looks, feels, and operates and that means that the look and feel may occasionally change. The new Gallery Header, which I demo'd here earlier is one such change that is getting ready for release that will again change the way your site looks, for the better.

As of now dgrin is probably the best place for you to find out about any changes that might impact your site. We know we have to do a better job of communicating Product Updates to you and we have some things in the works to help improve that. Stay tuned.

phaserbeam · April 10, 2016

leftquark wrote: »

I'm one of you guys who had to go in and remove an Advanced Customization that I had added, so I symphathize, but we have to always make SmugMug better for the majority of our users who wouldn't want to go in and have to toggle this on for every gallery.

Why not add the "Back to top" button as an option in gallery settings? then send a mail to every site-owner that there is a new feature that could be enabled.... Same effect, no unwanted site-changes.

leftquark wrote: »

There shouldn't have been anything that effected menus, slideshows or gallery styles within the last few months. Do you have an example I can look at so I can dig further?

Too late. Anyway... there must have been a site change. I did spent many, many days to make my site look ok for me and such an effect of flyout-menus that appears below the site-content-container would be something i would not have missed.
As said, too late... i removed any custom code, i plan to keep my site as simple as possible to not run into such issues again. Too bad i still have some issues with a default template that can not be accepted, see bug reports.

leftquark wrote: »

We're always looking to improve the way SmugMug looks, feels, and operates and that means that the look and feel may occasionally change. The new Gallery Header, which I demo'd here earlier is one such change that is getting ready for release that will again change the way your site looks, for the better.

I don't care anymore... i even think about to downgrade my account because if i don't need all those features that can be changed without notifing me then it might be better to not have those features at all.

leftquark wrote: »

As of now dgrin is probably the best place for you to find out about any changes that might impact your site. We know we have to do a better job of communicating Product Updates to you and we have some things in the works to help improve that. Stay tuned.

Yes, thats the feedback of the helpdesk. Stay in here... whoo... i have to join a forum to subscribe to a thread to get informed about changes that will make my site look bad. Nice

Cygnus Studios · April 12, 2016

I did notice it last week, thank you so much for adding it.

dberthia · April 14, 2016

Thanks for this- it looks/works great and is better than the custom solution I'd implemented. For me personally, I'm not affected very much when these new UI elements are dropped, since my site is mainly for family photos. I can see, however, how folks can become exasperated when these things are released with no advance warning. Like leftquark said, a better job of communicating prior to release is needed.

Teetime · April 20, 2016

Richard wrote: »

I like the back to top function, but I don't particularly care for the scrolling behavior. Hoping someone will post some CSS that overrides the animation parameters so that it just jumps to the top. Matter of taste, I suppose.

I agree with you on this Richard. Just took 30 seconds to scroll one of my galleries on mobile.

phaserbeam · April 20, 2016

Teetime wrote: »

I agree with you on this Richard. Just took 30 seconds to scroll one of my galleries on mobile.

Shouldn't it be enough to add some HTML on top of the page to set an anchor and add some more HTML/CSS at the end of the page to add an extra button/link to jump directly to the anchor on top of the page? This was something i was using before SmugMug added that 2nd button without asking and make me thinking about removing any custom code.

Simple code: Add this as HTML code on the bottom of your gallery:

<a href="#top">TOP</a>

On top of your gallery add this as HTML code:

<h1 id="top"></h1>

I just tried it again on one of my pages and it seem to work. Sorry, but i don't have a backup of the CSS to make the "Back to top" button more nice and fore sure i don't have any code to hide that smugmug-button.

Anyway, i can not recommend customizing SmugMug using custom HTML/CSS...

P.S. I just added the above HTML content blocks to my gallery page in "Customize > content and design" and it worked for all galleries. Since it is very easy to check (using the "END"-key on the keyboard and then click on the above TOP-link or SmugMugs "BackToTop"-Button) it is much faster then using the SmugMug-button.

Lille Ulven · April 22, 2016

leftquark just an idea regarding this new button (which is not too bad in my opinion). Could you add some code that made the lowest part of the button be presented above the footer at all times? If I am not completely wrong then I have seen an example of someone elses webpage (on smugmug, second to last that I have as of today commented on in that "get constructive critique for your website" thread in "New Smugmug") where actually the new "Back to Top" button overlapped the footer and by that was overlapping an icon to get to a social webpage (this one if it hasn't been fixed already: michaelshapirophotography.com/).
So if the button box would always end on the upper end of the footer, this might be a fix to all these kind of problems...

phaserbeam to remove the back to top button completely from your site use this CSS:

.sm-button.sm-button-size-small.sm-button-skin-submit.sm-page-scroll-to-top {
    display: none;
}

corpuzrob · June 14, 2016

Hello!

I also wish this feature came with an easy disable/enable option in the menu. I tried to eliminate the "back to top" button by putting the following code (copied from here) in my "entire site CSS" but I still see it:

/* Hide smug back to top button */
.sm-button.sm-button-size-small.sm-button-skin-submit.sm-page-scroll-to-top {
display: none;
}

What am I doing wrong? Thanks!

Lille Ulven · June 15, 2016

@corpuzrob: that line of code is in the same out-commented area as your customization for the cover-header font size, so see if my advise in the other thread helps here too

Good luck

Lille Ulven

corpuzrob · June 21, 2016

Thanks again, Lille!

That did work before (sorry I should have come back and mentioned that on this thread), but I did something extremely stupid today and accidentally reverted back to original settings for all galleries. I've managed to fix some issues but can't figure out why my custom "back to top" and "go to bottom" buttons are visible when I'm in "customizer" but disappear when I exit. The SM "back to top" button is still hidden. Before my stupid mistake today the custom buttons were showing.

Also my logo and navbar aren't properly pinned to the top left. When I scroll they jump around and sometimes disappear.

If you have any magical solutions like last time I will be even more in your debt!

-Rob

Lille Ulven · June 24, 2016

You're welcome, Rob.

For the new magic...the only code so far that I have been able to locate regarding your Back To Top button is...surprise surprise...the code to remove it.
Can you send me a link to the gallery in which you are when you see your adaptions happening in the customizer? Maybe I can locate it there somehow.

For the jumping of your left side - I know what you mean, I have it on my website too. I can only assume that when we scroll up/down initially the left side bar wants to scroll "with us" and is later on rendered to get back into place to where it belongs. So if you wait for a couple of seconds after scrolling those logos and menus tend to reappear. Other than having it scroll with the website forcing users to scroll back on top I have so far not have an idea of how to fix this - and of course the force the users to scroll up is not a great solution anyway, so I never even tried to implement it.

Best of luck

Lille Ulven (occasionally playing Gandalf

)

Erick L · June 25, 2016

leftquark wrote: »

As of now dgrin is probably the best place for you to find out about any changes that might impact your site. We know we have to do a better job of communicating Product Updates to you and we have some things in the works to help improve that. Stay tuned.

You really need a better way. People have been complaining for a long time. It sucks big time to find your site changed without warning and then trying to find a thread about it.

I like the back-to-top but a slightly bigger arrow pointing up would be better for non-English sites.

NEW: "Back to Top" Button

Comments