Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
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 = Web Developer. Book Author. Secretly Important.
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: Master the art of WordPress.
Thoughts
Spent some time refreshing my business portfolio at MonzillaMedia.com :)
Tried lots of apps for making animated GIFs from screen captures, so far Kap is my favorite. For example the GIF on this post.
Autumn is my favorite time of year.
Stoked! Had a great interview with Eric over at Speckyboy.com :)
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.