javascript 窗口宽高滚动
//不加window IE不支持
console.info(window.screenLeft);//IE支持火狐不支持 console.info(window.screenX);//火狐支持,IE不支持 //窗口
var leftX = typeof window.screenLeft=='number'?window.screenLeft:window.screenX; var topY = typeof window.screenTop=='number'?window.screenTop:window.screenY; window.innerWidth //窗口页面大小 ie不支持 谷歌中相等 window.outerWidth //窗口页面大小 +边框 document.documentElement.clientWidth;//所有浏览器都支持 console.info(document.getElementById("bottom").clientWidth);//可视区宽度,不计算外边框,外边距,计算内边距,滚动条会减少宽度,在没有内边距和滚动条的情况下不设置宽度,IE会默认为0 document.getElementById("bottom").scrollHeight; //IE指有效高度 document.getElementById("bottom").offsetWidth; //实际大写,浏览器都兼容//增加滚动条和外边距不计算,增加内边距会计算 document.getElementById("bottom").getBoundingClientRect().top; //浏览器都支持IE默认2,2
<button id="toBottom">滚动到底部</button>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>
<div id="bottom">
你好谁大法师打发斯蒂芬
</div> <button id="toTop">滚动到顶部</button>
//使指定区域可见
window.onload = function(){
document.getElementById("toBottom").addEventListener("click",function(){ document.getElementById("bottom").scrollIntoView(); },false); document.getElementById("toTop").addEventListener("click",function(){
document.getElementById("toBottom").scrollIntoView(); },false); }
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
var goToWhere = function (where)
{
var me = this;
me.site = [];
me.sleep = me.sleep ? me.sleep : 16;
me.fx = me.fx ? me.fx : 6;
clearInterval (me.interval);
var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
var height = !!where ? dh : 0;
me.interval = setInterval (function ()
{
var top = document.documentElement.scrollTop || document.body.scrollTop;
var speed = (height - top) / me.fx;
if (speed === me.site[0])
{
window.scrollTo (0, height);
clearInterval (me.interval);
}
window.scrollBy (0, speed);
me.site.unshift (speed);
}, me.sleep);
};
</script>
</head>
<body>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
<div onclick="goToWhere(0)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
<div onclick="goToWhere(1)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>
$('html, body').animate({scrollTop: $("#"+id).offset().top-20}, 200);
javascript 窗口宽高滚动的更多相关文章
- React组件自适应窗口宽高
很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...
- iframe跨域动态设置主窗口宽高
Q:在A项目的a页面嵌入一个iframe,src是B项目的b页面,怎样让a页面的高度跟b页面的高度一样? A:解决跨域方案:增加一个A项目的c页面. 操作步骤: 一,a页面的iframe设置: 获取到 ...
- javascript 获取当前浏览器窗口宽高
获取当前浏览器窗口宽度:document.documentElement.clientWidth;获取当前浏览器窗口高度:document.documentElement.clientHeight; ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- Javascript:各种宽高
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- JavaScript固定宽高
固定高宽: <script type="text/javascript"> if (/Android (\d+\.\d+)/.test(navigat ...
- C# 控制台程序(命令行程序)设置字体颜色,窗口宽高,光标行数
控制台程序(命令行程序)设置窗口宽度高度,如下代码: Console.WriteLine(Console.WindowHeight); Console.WriteLine(Console.Buffer ...
- JQ 获取浏览器窗口宽高
$(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...
- javascript各种宽高
参考: http://www.w3cschool.cc/jsref/dom-obj-all.html http://www.cnblogs.com/wen12128/archive/2012/05/2 ...
随机推荐
- 最新的Delphi版本号对照
The CompilerVersion constant identifies the internal version number of the Delphi compiler. It is de ...
- Dubbo 分布式服务框架简介
1.分布式服务框架 1.1 Dubbo 简介 Dubbo 是一个分布式服务框架,以及阿里巴巴内部的 SOA 服务化治理方案的核心框架.其功能主要包括:高性能 NIO 通讯及多协议集成,服务动态寻址与路 ...
- 全面理解Java内存模型(JMM)及volatile关键字(转载)
关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...
- Easyui中 alert 带回调函数的 消息框
带回调函数的 消息框: $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, top:200 , // ...
- R8500 MPv2 版本 刷梅林改版固件
由于R8500折腾起来比较繁琐.并且国内的koolshare上已经有人释出梅林改版移植的固件,主要是***更方便了,所以把R8500刷成了梅林固件,这是我第一次用上梅林固件. 刷机整个过程参考了下面的 ...
- 前端学习-jQuery
老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...
- case when then 中判断null的方法
--下列SQL无效 SELECT CASE MAX(T.CREATE_TIME) WHEN NULL THEN TO_DATE('2019-03-05 00:00:01','yyyy-MM-dd hh ...
- python模块import具体用法
同级目录 import 文件名 form 文件名 import * 子目录 import 目录名.文件名 form 目录名.文件名 import * 不同目录 先导入sys包,然后把对应的目录加入pa ...
- office2007每次打开都要配置文件,怎么取消配置(可行)
取消打开软件进行配置的方法 打开“我的电脑”——“C盘”— —“Program Files\Common Files\ Microsoft Shared\OFFICE12\Office Setup C ...
- 34对MyBatis的博客的整理心得
对本博客的mybatis重新读一下,做一个整理.如下: 1:为什么会有mybatis,因为原生的jdbc方式有很大问题: (1)数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭 ...