How to show "back to top" button using jquery only if browser height is shorter than page?

Question

How to add/show "back to top" button at bottom in a div using jquery only if height browser height is shorter than page, other wise it should be hidden?

<p><a href="#mainwrapper">Back to top</a></p>

to this

<div id="mainwrapper">

<p> Paragraph 1 </p>

<p> Paragraph 1 </p>

<p> Paragraph 1 </p>

<p> Paragraph 1 </p>

<p><a href="#mainwrapper">Back to top</a></p>

</div>

i need almost same like my this question but condition is different http://stackoverflow.com/questions/1899913/how-to-detect-linked-pdf-on-a-page-and-show-message-to-download-adobe-reader-usin/1899938#1899938

I need lightweight simple solution

Answer 1

Something like:

var wrapper = $('#mainwrapper');
if (wrapper.outerHeight(true) > $(window).height()) {
   wrapper.append('<p><a href="#' + wrapper.attr('id') + '">Back to top</a></p>');
}

Answer 2

Do something like this:

$(document).ready(function(){
    showHideControl();
    $(window).resize(function(){
        showHideControl();
    });        
});

function showHideControl() {
    var h = $(window).height();
    var ch = $("#content").height();
    if (ch < h) {
        $("#backControl").hide();
    }
    else {
        $("#backControl").show();
    }
}

The html needs to be updated a little too:

<div id="mainwrapper">
<div id="content">
<p> Paragraph 1 </p>

<p> Paragraph 1 </p>

<p> Paragraph 1 </p>

<p> Paragraph 1 </p>
</div>
<p id="backControl"><a href="#mainwrapper">Back to top</a></p>
</div>