Как показать кнопку «Вернуться вверх», используя jquery, только если высота браузера меньше, чем страница?

Question

Как добавить / показать кнопку «вверх» внизу в div , используя jquery , только если высота браузера короче страницы, в противном случае ее следует скрыть?

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

к этому

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

Мне нужно почти то же самое, что и мой вопрос, но условие другое Как обнаружить связанный PDF на странице и показать сообщение для загрузки Adobe Reader с помощью jquery?

Мне нужно простое простое решение

Answer 1

Что-то вроде:

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

Answer 2

Сделайте что-то вроде этого:

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

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>