Spring Sale! Save 30% on all books w/ code: PLANET24
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">↑</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">↑</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.

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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 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 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 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 »
Banhammer: Protect your WordPress site against threats.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.