javascript - 如何在 底部添加 "Back to top"链接是浏览器窗口比页面短，使用 jquery？

Question

如果浏览器窗口比页面短，如何使用 jquery 在底部添加“返回顶部”链接？

<div id="mainContent">

<p>Some content</p>

</div>

如果某些内容大于浏览器窗口(我的意思是如果页面上出现垂直条)然后我想在关闭 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 callback 中添加一个.返回链接使用包含它的相同 div 的 id 属性将用户带回页面顶部。 (如果这个主要内容 div 不在页面的最顶部，您需要制作一个单独的 div，它有自己的 id；这个 div 可以是空的，只要它有一个 id 属性。)