CSS "Back to Top" link - no javascript

buckworks · August 25, 2016, 12:23:39 PM

I've been wanting to add a "Back to Top" link in assorted places so I went looking for code. I came across an approach I like that doesn't require javascript. The secret sauce is how you layer the z-indexes.

http://kamikazemusic.com/quick-tips/a-quick-css-based-back-to-top-link/

The demo is plain-Jane but you could style it however you wished.

rcjordan · August 25, 2016, 12:43:28 PM

Wonder what happens if you embed other html --text ads, for instance- up there within the header tag?

ergophobe · August 25, 2016, 03:21:28 PM

Nice. You could probably also position right and do some height/margin 50% trickery to make it float in the middle of the right margin next to the scroll bar.

Quote from: rcjordan on August 25, 2016, 12:43:28 PM
Wonder what happens if you embed other html --text ads, for instance- up there within the header tag?

As long as the header container is position:relative and has the highest z-index, it shouldn't make any difference what's in it. It should scroll off the page and reveal the fixed "back to top" under it.

rcjordan · August 25, 2016, 04:22:24 PM

Yeah. And what would gbot see. (Back in the day, I had some success with, ummm, poorly-formed code.)

buckworks · August 25, 2016, 05:26:53 PM

>> And what would got see

The link for this could be placed anywhere within <body>... </body> and the visual behaviour would be the same. So you could put the link at the bottom and your existing source code order could remain as is.

>> what happens if you embed other html

I've been playing with other ways to use this, ranging from adding a join-our-newsletter link beside the back-to-top link, to tucking a banner under the masthead to be revealed on scroll. Lots of possibilities!

As with so many things in life, this will have the best effect if not overdone.

rcjordan · August 25, 2016, 05:32:19 PM

>tucking a banner under the masthead to be revealed on scroll

My FIRST thought. Screw the btt useability crap, hhh.

></body>

Yeah, but then it wouldn't be off-standard. Just plain ol' plain ol'. What's the (gbot) fun in that?

buckworks · September 09, 2016, 01:00:58 AM

I've been experimenting with this technique and testing what happens when there's an extra link or two along with the "Back to Top" link. I've had some affiliate sales that I can trace to the extra links so now I'm testing a little script to random-rotate a couple of links.

For three text links in a narrow bar across the top of the page, I put this near the bottom of my <body>:

<ul id="ToTop">
<li><a href="http://example.com/affiliate0/" target="_blank">Goodies</a></li>
<li id="demo"></li>
<li><a href="#">Back to Top ⇧</a></li></ul>

<script>
if (Math.random() < 0.5) {
text = "<a href='http://example.com/affiliate1/'>Treasures</a>";
} else {
text = "<a href='http://example.com/affiliate2/'>Cool Stuff</a>";
}
document.getElementById("demo").innerHTML = text;
</script>

In my CSS:

ul#ToTop {position:fixed;top:0;z-index:5;background:#fff;display:block;text-align:center; width:100%;border-bottom:1px #7ab9bc solid;padding:0; margin:0:}
#ToTop li {display: inline-block;padding:0; margin:0s;width:32%;}
#ToTop li a {display:block;width:100%;}
#ToTop li a:hover {background-color: #eee;)

I also gave the masthead div a higher z-index number than it had before.

Fun stuff!

rcjordan · September 09, 2016, 02:56:40 PM

Though it now probably has a lower likelihood of seo success, I had enough site indexing/ranking success with html that looked like banner ads being injected by the ad server and -more recently- bootstrap top navbar links that I'd spend some time getting that out of the script tag.