我有一个简单的页面，当我向下滚动时，我想使顶部div固定，然后使“ To Top” div返回页面顶部。我使用document.documentElement.scrollTop获取当前从顶部滚动的位置，并使用document.documentElement.onscroll调用该函数。但是，当我设置“ To Top” div时，由于window.scrollTo(0,0)不起作用，我不得不使用document.documentElement.scrollTo(0,0)函数返回到页面顶部。 window和document.documentElement有什么区别？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
#heading {
color: white;
background:steelblue;
position:absolute;
left:10px;
top:-20px;
padding:5px;
}
p {
color: green;
}
span {
color: red;
display: none;
}
#top{
padding:5px;
border:dotted 2px steelblue;
box-shadow: -3px -3px 3px;
background:steelblue;
width:75px;
position:fixed;
right:0;
bottom:0;
display:none;
opacity:0.9;
border-top-right-radius:100%;
border-top-left-radius:100%;
}
</style>
</head>
<body>
<div id="heading"><h1>Try scrolling the iframe.</h1></div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<div onclick="top_function()" id="top">
<h3>To Top</h3>
</div>
<script>
document.documentElement.onscroll = function(){ //a function is call when scroll using .onscroll
var x = document.documentElement.scrollTop; //x is the current scroll position of document
if(x > 0){ //set greater than zero to avoid the annoytingblinking effect
document.getElementById("heading").style.position="fixed";
document.getElementById("heading").style.top="-20px";
document.getElementById("heading").style.left="10px";
}
else{
document.getElementById("heading").style.position="absolute";
document.getElementById("heading").style.top="-20px";
document.getElementById("heading").style.left="10px";
};
if(x > 100){
document.getElementById("top").style.display="inline-block";
}
else{
document.getElementById("top").style.display="none";
};
}; //ends function onscroll
function top_function(){
window.scrollTo(0,0);
};
最佳答案
通常，DOM API很难。根据您的工作方式，jQuery有潜力在可理解性，可读性，可维护性和跨平台兼容性方面为您带来更多的发展优势。
就是说，document.documentElement是对文档的<HTML/>节点的引用。除非发生真正奇怪的事情（例如html { overflow: scroll; }），否则scrollTop的<HTML/>应该始终为0，就像其他未滚动的节点一样。
直接页面滚动实际上发生在window上。 This fiddle显示如何侦听窗口上的滚动偏移量变化，如何获取窗口的当前滚动偏移量以及如何将窗口滚动到新的偏移量。
作为记录，如果您想创建一个滚动到页面顶部的链接，则根本不需要JavaScript，只需创建一个指向#的链接。只要您不拦截链接的本机处理，定义的行为就是滚动回到页面顶部。