核心提示：利用动态获取滚动条位置、距离页面顶部距离scrollTop，两种方法进行封装htmlhtml lang=enheadmeta charset=UTF-8style*{margin: 0px;paddi...
利用动态获取滚动条位置、距离页面顶部距离scrollTop，两种方法进行封装
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0px;
padding: 0px;
}
p{
height: 2000px;
background-color: #F2AD0A;
position: relative;
}
#but1{
position: fixed;
top: 100px;
left: 300px;
background-color: chartreuse;
border: solid 1px orange;
border-radius: 100px;
}
#but2{
position: fixed;
top: 300px;
left: 300px;
background-color: chartreuse;
border: solid 1px orange;
border-radius: 100px;
}
style>
<title>Titletitle>
head>
<body>
<p><button id="but1">显示滚动条距离页面顶部距离scrollTopbutton>
<button id="but2">显示滚动条Y轴移动距离scrollTopbutton>
p>
body>
<script>
var but = document.getElementsByTagName("button")[0];
but.onclick = function () {
alert(scrollTop());
}
function scrollTop() {
var scrollTop = 0;
if (/*document.documentElement&&*/document.documentElement.scrollTop){
scrollTop =document.documentElement.scrollTop;
}else if (document.body){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
/*方法2不适用于IE*/
var but2 = document.getElementsByTagName("button")[1];
but2.onclick = function () {
console.log("窗口发生滚动");
alert(scrollY1());
}
function scrollY1() {
var scrollY = window.scrollY;
return scrollY;
}
script>
html>
