jQuery "scroll to top" and "scroll to bottom" buttons.

[Antechinus]

@ Antechinus:

I like the looks of your site. Could I ask you for the code for the Goto scroll buttons?

Sure. You'll need to call jQuery of course (I'm using the Google CDN). Assuming you've sorted that already, they're just some fixed positioned links and a bit of js and css.

Markup is:

Code Select Expand

<a href="#top" id="toplink" title="Go to top">↑</a>
<a href="#bot" id="botlink" title="Go to bottom">↓</a>';

Plus you'll need to add a couple of links somewhere with the id's of #top and #bottom.

JS is:

Code Select Expand

// Begin jQuery section.
$.fn.ready(function() {

// Smooth scroll to top.
$("a[href=#top]").live("click", function(e) {
$("html,body").animate({scrollTop:0}, 1000);
e.preventDefault();
});

// Smooth scroll to bottom.
$("a[href=#bot]").live("click", function(e) {
$("html,body").animate({scrollTop:$(document).height()}, 1000);
e.preventDefault();
});
});

CSS is:

Code Select Expand

/* The "go to top" and "go to bottom" links. */
#toplink, #botlink {
position: fixed;
right: 7.5%;
bottom: 50%;
padding: 11px 9px 11px 11px;
margin: 0 -20px 0 0;
color: #666;
font-size: 1.5em;
background: #f0f0f0 url(images/Standard/catbg.gif) 0 5px repeat-x;
border: 1px solid #b4b4b4;
border-bottom: 1px solid #b8b8b8;
border-radius: 6px 3px 0 0;
z-index: 99;
box-shadow: 1px 2px 3px rgba(0,0,0,0.25);
}
#botlink {
top: 50%;
padding: 10px 9px 11px 11px;
bottom: auto;
border: 1px solid #b4b4b4;
border-top: 1px solid #ddd;
border-radius: 0 0 3px 6px;
}
#toplink:hover, #botlink:hover {
color: #a52311;
background: #fcfcfc;
text-decoration: none;
}

Wrapper width for the theme is set to 85%. Once the screen starts getting narrow enough that the theme will take more than 85% of the screen (IOW, theme min-width starts coming into play) the buttons will move across the face of the theme a bit.

That's not a problem with this theme since its markup means I can get away with a 660px min-width, and there's an alternate layout for phones.

If you're trying to use a standard 90% wrapper width with default templates, you may want to add some media queries to reposition the buttons on narrow screens.

ETA: This post should probably be split out to Tips and Tricks or something.