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

Question

How to add / show a back to top button at the bottom of a div using jquery only if the height of the browser is shorter than the page, the other is hidden?

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

to that

 <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 the same as my question, but the condition is different. How to determine the linked PDF on the page and show the message to load the Adobe reader using jquery?

I need an easy easy solution

Answer 1

Sort of:

 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(); } } 

It is also necessary to update html:

 <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>