[thelist] showing/hiding a back to top link.

.jeff jeff at members.evolt.org
Wed Jan 30 16:28:00 CST 2002


olly,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Olly Hodgson
>
> I want to put a "back to top" link into the bottom of my
> pages, that becomes visible only if the page is taller
> than the browser window.
>
> I figured that I could put it into a DIV, then use a JS
> trick to show/hide the DIV as required. The thing is, I
> have no idea where to start with JavaScript. Does
> anybody know of a way to do this?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

haven't built anything like this, but this would be one approach.

find yourself one of the many scripts out there that places a "bug" in the
bottom-right corner of your browser window.  modify the script so that it
shows the "back to top" link/icon if the page is scrolled more than a
defined number of pixels down (look at the scrollTop property for this
info).

for backwards compatibility (yes, it's possible), place the "back to top"
piece as the last item, right-aligned, at the bottom of your content.  take
a look at how it's been done on a site i built recently.

http://mtbachelor.com/mountain_services/lifts_trails/

non-js browsers and browsers that don't support the scrollTo() method will
jump to the #top bookmark i've included in the source.  otherwise the
browser window is simply scrolled to the top (0, 0).

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/





More information about the thelist mailing list