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.
8 responses to “Dynamic Go-to-Top Link”
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
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.
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.
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 :)
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 ?
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..
Wowww : what a big screen you have so :)
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