Javascript 如何加上「；“返回顶部”；底部的链接位于<；部门>；使用jquery时，浏览器窗口是否比页面短？

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

<div id="mainContent">

<p>Some content</p>

</div>

一些内容

如果某些内容大于浏览器窗口（我的意思是如果页面上出现竖条） 然后，我想在结束div之前将其添加回top

<div id="mainContent">

<p>Some content</p>

<p>Some content</p>

<p>Some content</p>

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

</div>

一些内容

一些内容

一些内容

如果浏览器有垂直滚动条，用户在页面底部，那么我想显示“返回顶部”链接。

普通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（）

一些内容

一些内容

一些内容

编写一些代码，以便在页面加载完成后运行：

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

$（函数（）{
如果（$（窗口）.height（）<$（“#主内容”）.height（））{
$（“#主要内容”）。附加（“”）；
}
});

---

这是尽可能简单的；我们使用jQuery方法来查看是否需要返回链接，如果需要，则添加一个返回链接。返回链接使用相同的

div

的

id

属性将用户带回页面顶部。（如果此主要内容div不在页面顶部，您需要使用自己的id创建一个单独的div，即；此div可以为空，只要它具有id属性。）

我不希望绝对定位“返回顶部”，呃，这里没有绝对定位？如果你担心不想硬编码，那么w3c验证了吗？@metal gear solid：是的，它通过了官方w3c验证程序的严格验证。实际上，最好使用ID属性，而且它可以用于任何元素。如果您的标题位于顶部，您可以编写

，任何指向

#top

的链接都将出现在那里。@Eli Courtwright-但在a和map元素的XHTML 1.1

中无效，名称属性已被删除，取而代之的是id属性

@metal gear solid:感谢您的引用；我已经编辑了我的答案，以使用div id而不是锚定名称。

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