1
У меня есть простая страница. Я хочу, чтобы верхний div был исправлен, когда я прокрутил вниз, и div «To Top», чтобы вернуться в начало страницы. Я использовал document.documentElement.scrollTop, чтобы получить текущую позицию прокрутки сверху и document.documentElement.onscroll, чтобы вызвать функцию. Но когда я установил div «To Top», мне пришлось использовать функцию window.scrollTo(0,0), чтобы вернуться в начало страницы, потому что document.documentElement.scrollTo(0,0) не работал. В чем разница между window и document.documentElement?Window Vs document.documentElement best practices
<!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);
};
Вопросы «Лучшая практика» имеют тенденцию закрываться по мере наведения мнения. Вы должны, вероятно, оставить эту часть или определить, что вам нужно «лучше всего» (например, «Какой из них быстрее?») – BSMP