<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 { width: 100px; height: 100px; margin-top: 1000px; background-color: #ff0; } </style> </head> <body> <div id="box1"></div> <script> document.getElementById('box1').onclick = function() { window.scrollTo(0, 0); }; </script> </body> </html>
滚动条位置
by精通JavaScript
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 { width: 100px; height: 100px; margin-top: 1000px; margin-left: 2000px; background-color: #ff0; } </style> </head> <body> <div id="box1"></div> <script> // 确定浏览器水平滚动位置的函数 function scrollX () { // 一个快捷方式，用在IE6/7的严格模式中 var de = document.documentElement; // 如果浏览器存在pageXoffset属性，则使用它 return self.pageXOffset || // 否则，尝试获取根节点的左端滚动的偏移量 (de && de.scrollLeft) || // 最后，尝试获取body元素的左端滚动的偏移量 document.body.scrollLeft; } // 确定浏览器垂直滚动位置的函数 function scrollY () { // 一个快捷方式，用在IE6/7的严格模式中 var de = document.documentElement; // 如果浏览器存在pageYoffset属性，则使用它 return self.pageYOffset || // 否则，尝试获取根节点的顶端滚动的偏移量 (de && de.scrollTop) || // 最后，尝试获取body元素的顶端滚动的偏移量 document.body.scrollTop; } document.getElementById('box1').onclick = function () { alert(scrollX() + ',' + scrollY()); }; </script> </body> </html>
禁用滚动条
firefox下键盘还起作用
windows下滚动条宽度17px
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } p { width: 111.111111%; font-size: 50px; } #box1 { width: 100px; height: 100px; background: #f00; } #box2 { width: 100px; height: 100px; background: #ff0; } </style> </head> <body> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <div id="box1"></div> <div id="box2"></div> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <script> // 滚动条位置 function scrollY() { var de = document.documentElement; return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop; } function scrollX() { var de = document.documentElement; return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft; } // 浏览器判断 var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; document.getElementById('box1').onclick = function() { var y = scrollY(), x = scrollX(); document.body.parentNode.style.overflowY = "hidden"; document.body.parentNode.style.overflowX = "hidden"; /*if (Sys.firefox) { window.scrollTo(x, y); }*/ }; document.getElementById('box2').onclick = function() { var y = scrollY(), x = scrollX(); document.body.parentNode.style.overflowY = "scroll"; document.body.parentNode.style.overflowX = "scroll"; /*if (Sys.firefox) { window.scrollTo(x, y); }*/ }; </script> </body> </html>