Question

我有一个简单的页面，当我向下滚动时，我想让顶部的div固定，并且＃34; To Top＆＃34; div返回页面顶部。我使用document.documentElement.scrollTop从顶部和document.documentElement.onscroll获取当前滚动位置以调用该函数。但是，当我设置＆＃34; To Top＆＃34; 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);
};

Answer 1

通常，DOM API很难。根据您的工作，jQuery有可能在可理解性，可读性，可维护性和跨平台兼容性方面为您的开发提供更大的帮助。

话虽如此，document.documentElement是对文档的<HTML/>节点的引用。除非发生奇怪的事情（例如html { overflow: scroll; }），scrollTop的{{1}}应始终为<HTML/>，就像其他未滚动的节点一样。

直接页面滚动实际上发生在0上。 This fiddle显示如何监听窗口上的滚动偏移更改，获取窗口的当前滚动偏移量，并将窗口滚动到新的偏移量。

对于记录，如果您想创建一个滚动到页面顶部的链接，则根本不需要JavaScript，只需创建指向window的链接即可。只要您不拦截链接的本机处理，定义的行为就是滚动回到页面顶部。

Window Vs document.documentElement最佳实践

1 个答案: