Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security

Dynamic Go-to-Top Link

Instead of displaying a perpetual “go to top” link for every page, here’s a quick way to dynamically display the link only if the content height is greater than that of the browser window. So it’s there when you need it, not when you don’t. Just include the following snippet of jQuery with your design:

// dynamic top link @ https://perishablepress.com/dynamic-top-link/
function xycss_dynamic_top_link(){
	if($(window).height() < $(document).height()) {
		$('body').append('<div class="button" id="top-link">&uarr;</div>');
		$('#top-link').click(function() {
			window.location = "#top";
		}).css({
			width:'24px', height:'24px', lineHeight:'24px', bottom:'3px', right:'3px', 
			background:'#663300', color:'#fff', opacity:0.3, zIndex:999, textAlign:'center', 
			textDecoration:'none', position:'fixed', cursor:'pointer',
			border:'3px solid #c7bc8e', borderRadius:'24px'
		}).hover(function(){
			$(this).css('opacity',0.6);
		},function(){
			$(this).css('opacity',0.3);
		});
	}
}
$(document).ready(function(){
	xycss_dynamic_top_link();
});
$(window).resize(function() {
	$('#top-link').remove();
	xycss_dynamic_top_link();
});

That’s pretty much it, should be plug-n-play. I’ve included the same CSS styles I use here at the site, for the circle with the “up” arrow (see lower-right corner of the page). When the page content exceeds the height of the browser window, the top link is included using the following markup:

<div class="button" id="top-link">&uarr;</div>

This markup will serve as a “clickable” link that will take the user to the top of the page. So you can style it directly with #button and/or #top-link. See the various .css() parts of the code to change the link’s appearance and so forth.

And of course if the user doesn’t have JavaScript, they’ll can just use their browser’s default scrollbars, swipes, or whatever.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
The Tao of WordPress: Become your own WordPress guru.

8 responses to “Dynamic Go-to-Top Link”

  1. nyamsprod 2012/04/10 7:26 am

    Cool snippet, but I think the code can be improved, for instance why create a new element a each resize ? why not create One element and toggle is display ? it’s more efficient.

    Another thing is why not put the main CSS in the css file and not in the JavaScript, that way it’s easier to adapt an change the button layout without messing with the JavaScript.

    And last but not least, the fact that you can’t have the button without javascript is not so user friendly

    • Jeff Starr
      Jeff Starr 2012/04/10 7:54 am

      All good points, I think, and yes the code can be improved, which is one of the reasons why I post/share it with people like you, to help make it even better!

      For the CSS, I include it with the JS so it’s only included if the link is created (i.e., the user has JS).

      And yeah, if you’re one the few people who doesn’t have JS, you have to use the scrollbar, as discussed in the article. If you know a way around that one, I would love to hear it ;)

      Thank you kindly for the feedback.

      • nyamsprod 2012/04/10 1:27 pm

        you asked for it :) here’s an “improved version” with a fallback behaviour without JavaScript and a clear separation between the JavaScript and the CSS code.

      • Jeff Starr
        Jeff Starr 2012/04/10 9:35 pm

        Woo-hoo! Awesome, gonna have to adapt for the site.. still disagree about loading CSS when it’s not used (ie, JS disabled), but everything else looks good. Thanks nyamsprod :)

  2. Christophe 2012/04/10 9:22 am

    Hi Jeff,
    as usual good stuff again.
    But, on my browsers, the link always appears at the bottom even if I’m at the top of your page.

    Am I the only one with this case ?

    • Jeff Starr
      Jeff Starr 2012/04/10 9:36 am

      Thanks Christophe :) The link should only disappear when the content length is less than the height of the browser window.. unfortunately I couldn’t find any pages on this site that are short enough to make it work as a demo, but it should work as advertised..

  3. Christophe 2012/04/10 9:47 am

    Wowww : what a big screen you have so :)

  4. Tam Nguyen 2012/05/28 2:30 am

    if you run a WordPress with JS that’s called for noConflict, I found that using the dollar sign kinda breaks everything. I’ve had to convert the dollar sign to jQuery. This might not not be an improved version, but at least it works: http://pastebin.com/1u41tBXU

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Become your own WordPress guru.
Thoughts
Dashlane recently redesigned, stating proudly that they "removed all filigree". They should have kept it, as the app now looks generic and boring.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .
Great tool for checking browser caching for web pages and all included files.
The new minimalist design styled by 14KB of CSS (uncompressed and un-minified). That covers 850+ posts and pages spanning 15 years of diverse content.
Amazing (and sad) to think that, in the year 2020, Internet Explorer still doesn't support the placeholder attribute, which is supported by all other major browsers.
Finishing up with the latest redesign for Perishable Press! Should be live this week or early next.