The new Back to Top popup button

Jtring

I very much like the new little popup button that magically appears at lower right as one scrolls through a long webpage. On my collage landscape galleries, some of which can get rather long, I installed my own version of exactly that functionality, a hyperlink to the top, in my pinned sidebar. So kudos for implementing this much tidier version.

Even better, after the little pop up window appears when I scroll down far enough, it goes away when I scroll up. It's there and handy if I want it, but there's an easy way to get rid of it. That's perfect.

But then there's the anomaly/bug/whatever. If I scroll down a second time and scroll up, the pop-up may or may not disappear. Trouble is, that's exactly the scrolling action one would use work through a large collage landscape gallery: lots of little scroll-downs and, if the pop up was unwanted, lots of little scroll-ups to remove it. After a couple of those ups and downs, the popup is almost guaranteed to be stuck, covering its bit of screen real estate. That is not a big deal for large screens, but it is a bit more of an imposition for lower resolution monitors and smaller tablets where every pixel is dear.

I don't have a clear picture of exactly when the button locks in position or not; I suspect it has something to do with position on the webpage and those generally invisible page boundaries used to manage partial loads. It appears to depend a bit on how far one scrolls each time. None the less, the behavior seems generally repeatable. In my playing around, a small number of ups and downs -- sometimes two, sometimes three, occasionally more -- is enough to lock the popup. (If anybody wants to play with this and doesn't have a long collage landscape gallery or other long webpage of their own, feel free to play with my most recent long gallery. But the behavior does not seem to depend on the specific page.)

Suffice to say, this looks like a bug inside an otherwise wonderful new feature. How about cleaning this up?

Added note: if you look at that linked gallery, note I've inserted a little piece of CSS to move the pop-up to the left side of the page (still at the bottom) where it's a tad less obtrusive given I have a sidebar over there.

leftquark

Hi Jim,
Glad you found the new Back to Top button!

The "Back to Top" button appears after you have scrolled beyond twice the height of the browser. For example, if the browser was 400px tall, the button would appear after you've scrolled 801px. If you scroll back to 799px, it'll disappear. It doesn't go away on every up-scroll but rather after you've scrolled up beyond that 2X browser height, so the 799.

Are you saying that this behavior isn't working? I tested it on your site and on mine in Chrome for Mac and it always went away where I expected it to.

Perhaps your request is to see it behave slightly differently, that on any up-scroll it disappears?

Jtring

Hi Aaron,

Yes, I found the new button and, as noted, think it's basically a fine feature. What you describe is the behavior I observe, now that I look closely. What I was seeing was going back and forth right at the twice-height edge and then dropping a little lower.

So I guess my request turns from bug report to feature update. It would be nice if there was a way to have that pop-up disappear after a while. That could be like the behavior I thought I was seeing, fading on an up-scroll, or it could be like the lightbox where controls fade after a few seconds. I personally like the former. In any case, I definitely dislike controls covering content. The current implementation also seems a little inconsistent with responsive design since ever-larger fractions of the screen get covered as the screen size gets smaller. I try to make sure my site customization remains usable on an 800 x 600 screen -- ancient monitors, I know, but think older tablets in landscape mode -- and it was my testing there that led to the initial concern.

Jtring

Just so you can see the sort of thing I'm worried about, here's an example.





This is a 1x1 aspect ratio picture, in a collage landscape gallery with captions below and using large sized images, on a simulated 800 x 600 screen. All the pictures line up vertically. There's a sidebar at the left that's scrolled up and away. I have a personal CSS customization that allow more than two-line captions in CL. The bad behavior: the popup covers the caption and if I scroll either way, I don't get the whole picture. This is exactly the sort of place I'd like that popup to vanish ... and re-appear as needed since being able to go the top would seem to be especially valuable when a gallery really gets strung out as it is here.

jrwills

Don't know if this will help but it might.

I find the "back to top" button in the way on the right side. I read somewhere (wish I could remember where) to move it to the left side.

Add to general CSS:

.sm-button.sm-page-scroll-to-top {
left: 32px;
}

Since it's a bit out of the user's line of site, I changed the background to bright green so it would catch their eye.

.sm-button.sm-page-scroll-to-top {
background-color: #14b003;
bottom: 32px;
color: #ffffff;
left: 32px;
opacity: 0.90;
}

I would like to be able to change the scrolling position from where it pops up at twice the height of the browser to something like 1.25 the height.

OTOH, there's always "Home" "End" "Page up/Down" and "Ctrl + arrows" but for many visitors you might have to include that info in a help page.

leftquark

Right now it switches to just an up arrow at a screen width of 500px. If you want to make it so that the "Back to Top" shrinks to just an up arrow at a different width, say at 800px, you can use:

/* Make the back to top switch to the arrow at 800px instead of 500px */
@media only screen and (max-width: [COLOR="red"]800px[/COLOR]), only screen and (max-height: 425px) {
	.sm-button.sm-page-scroll-to-top {
	    padding: 4px !important;
	}
}

/* Make the back to top switch to the arrow at 800px instead of 500px */
@media only screen and (max-width: [COLOR="Red"]800px[/COLOR]), only screen and (max-height: 425px) {
	.sm-button.sm-page-scroll-to-top .sm-page-scroll-to-top-label {
	    display: none !important;
	}
}

Just set the width (in red) to whatever you want!

Jtring

jrwills -- I did something like that on my site as well, although the specific location is a little different. With the left sidebar in it's normal place (screens 671px wide and over), my site's design presents no issues with the popup on that side. Unfortunately, I know of no way to change when the popup appears. I believe that's controlled by SmugMug's internal javascript.

leftquark -- Thank you for the code. I've implemented it for screens 670px wide and smaller when the sidebar gets moved to the top of the screen.

With these, I think the behavior of the new popup is fine for my site.