How to make fixed "Back to Top" link

... that doesn't show on short pages?

[buckworks]

I'd like to add a fixed "Back to Top" link" to my site's template that would appear in the bottom corner. That much I know how to do, but I'd like the link not to show on short pages or when the user hasn't scrolled yet. That's the aspect I can't figure out.

Is there some combination of CSS styles that would make it visible on long pages when the user has already scrolled, but not otherwise?

The site is HTML5 / CSS3.

[lucy24]

I really think you're looking at javascript, not css alone. You need to do two things. One is detecting user activity; that's a js function. The other is determining height of the physical viewport so it can be compared to height of the page content; I'm pretty sure that too can only be done in javascript.

Now, you could set your "back to top" link to an absolute position, such-and-such distance from page top. Then it would only be visible if the page is taller than the distance you specify. But you'd still have to make up some value for this distance-- and then bring on the scripting if you want the link to continue moving "downward".

How many versions of MSIE are you prepared to ditch?

[tangor]

Are you using a standard footer for your pages? That's where I place a "HOME" or or "BACK TO TOP" link. I want the footer no matter how short the page... and beauty of that is no calculations required.

[not2easy]

You can serve alternate style sheets based on media queries using a max-height setting. I haven't used these, but it looks like what you are looking for - the basics are here: [developers.google.com...]

[buckworks]

@tangor I already have a "Back to Top" link in the footer but I'm wanting more finesse than that.

@not2easy I couldn't find anything in those documents that would achieve what I'm looking for. What am I missing?

I've seen this effect in a number of places but I can't figure out how they're doing it and I can't find instructions anywhere.

[brotherhood of LAN]

I don't know CSS well enough to know if you can do something conditional with the viewport height and scrollbar.

You may want to Google for a bookmarklet called 'visual event' that'll show JS events that may be creating the back to top element, that otherwise aren't hard coded into the source.

[not2easy]

About half way down the page linked above you'll see:

The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

@media (query) {
 /* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are

min-width, max-width, min-height

and

max-height

.

Further down the same page is an example of what goes where they have

/* CSS Rules used when query matches */ 

:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
 <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">

It looks like that could be customized to do what you want. The syntax to add it to the page's head is:

<link rel="stylesheet" media="(max-height: 800px)" href="short-page.css">
<link rel="stylesheet" media="(min-height: 800px)" href="tall-page.css">

..with the actual heights to whatever suits your layouts.
The difference in the tall-page.css is just set to

diplay: none;

for the class containing the element you don't want to show.

Another place to get help with the syntax is at Mozilla Developer: [developer.mozilla.org...]

[lucy24]

I can't figure out how they're doing it

Well, you're just not snooping hard enough.

Open the page source and search for the "Back to top" text-- and hope they're not using an image without <alt> text. If the string doesn't occur, you already know it's all done with scripting. (Yes, it could be done with "content" in CSS, so the text itself never appears in the HTML, but why would they?) If the string is there, see whether it's wrapped in something with a class and/or id attribute.

Now it's on to the page's stylesheets. Cross your fingers and hope you're not on one of those CMS sites* with 35 separate stylesheets to plow through, because the material you're looking for will be in the 35th. (If you work from bottom to top, it will be in the first.) Again, if the CSS casts no light on a "display" property, you're looking at scripting.

when the user has already scrolled

Come to think of it: Are you sure that scrolling, as opposed to page position, is the trigger? You'd have to test by going to an anchor further down the page and see if the "back to top" is already present even if you got there without scrolling. If you scroll down and then back to the top, is the link still visible?

The snag to "min-height" or similar is that it's only meaningful if the page content has a knowable height. That means setting all text to a fixed pixel size, and also forcing a width on all content (because page width determines the number of lines in longer text blocks). You probably don't want to do that.


* On the other hand, if it is a CMS it's probably open source, so you need not feel as guilty about swiping someone else's code.

[not2easy]

The snag to "min-height" or similar is that it's only meaningful if the page content has a knowable height. That means setting all text to a fixed pixel size, and also forcing a width on all content (because page width determines the number of lines in longer text blocks). You probably don't want to do that.

My thoughts when I posted it: it is not ideal, the confusion of using height rather than width to determine things when the hardware pixels vs. css pixels kick in is more confusion than I like to deal with - But I don't think it would require using fixed pixel sizing, but being aware of the conversion range might resolve it to an acceptable px setting. The media query does not position the link, it only specifies which stylesheet is used, the link is positioned on the page itself and has "display: none;" on a page longer than 800px (or 2000px or whatever length is specified). For some sites, some pages it could work so I put it up as a possibility.

[buckworks]

some sites, some pages

I'd want to be able to use it in my site-wide template.

only meaningful if the page content has a knowable height

Not knowable. The site's mixture of short and long pages would vary as items come and go.

just not snooping hard enough

I spent several hours hunting for how-tos before I came here to ask. I know my way around basic-to-intermediate HTML and CSS, but I'm pushing the limits of my skill set here, especially if there's scripting in the mix. (I'm a marketer, not a true techie.)

has "display: none;" on a page longer than 800px

Actually it's on the long pages that I'd want it to show, but only once the user has started scrolling.

Google for a bookmarklet called 'visual event'

Thanks, BoL. I'll make that my next foray into the unknown. :)