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

Question

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

<div id="mainContent">

<p>Some content</p>

</div>

Если какой-то контент больше, чем окно браузера (я имею в виду, если на странице появляется вертикальная полоса) тогда я хочу добавить Back to top как раз перед закрытием div.

<div id="mainContent">

<p>Some content</p>

<p>Some content</p>

<p>Some content</p>

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

</div>

Если в браузере есть вертикальная полоса прокрутки и пользователь переходит на нижнюю часть страницы, то я хочу показать ссылку «Наверх».

Answer 1

Напишите какой-нибудь код для запуска после загрузки страницы:

$(function(){
    if( $(window).height() < $("#mainContent").height() ) {
        $("#mainContent").append('<a href="#mainContent">Back to top</a>');
    }
});

Это так просто, как может быть; мы используем метод jQuery height , чтобы посмотреть, нужна ли нам обратная ссылка, и добавим его, если мы сделаем в нашем обратном вызове document.ready . Обратная ссылка использует атрибут id того же самого div, который содержит его, чтобы вернуть пользователя наверх страницы. (Если этот основной div с содержимым находится не в самой верхней части страницы, вам нужно создать отдельный div с его собственным идентификатором, который является; этот div может быть пустым, если он имеет атрибут id.)

Answer 2

Обычный HTML:

<div id="mainContent">
<a name="backToTop" />
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<a href="#backToTop"> Back to top </a>
</div>

jQuery: с помощью ScrollTo (http://plugins.jquery.com/project/ScrollTo)

<div id="mainContent">
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<a href="$(\"#backToTop\").localScroll()">Back To Top</a>
</div>