bscroll 滚动位置_浅谈jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大，因为Web文档具有很多内容，往往会导致页面比浏览器还要高，有时候甚至还要宽，这迫使访问者通过滚动来查看整个页面(如图10-8所示)。当访问者滚动页面的时候，一部分文档会从视线中消失。例如，Web页面不能完全放入浏览器窗口中，文档会向左或向上滚动，因此，页面的顶部和左边都会消失在视野之内。这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素，例如，屏幕顶部的一个动态Banner；而如果只是试图将元素的left和top位置设置为0，将会遇到麻烦，你实际上只是将其放到了文档的顶部，但是却位于浏览器窗口之外。

幸运的是，jQuery提供了两个函数，允许你确定从顶部和左边滚动页面的多少部分(换句话说，文档的多少像素存在于浏览器窗口的上边和左边)。要确定文档的多少部分在浏览器窗口之上，使用如下所示这行代码：

复制代码代码如下:

$(document).scrollTop()

要确定文档的多少部分位于屏幕的左边，使用如下所示这行代码：

复制代码代码如下:

$(document).scrollLeft()

这两个函数都返回一个像素值，你可以用它来定位页面上的另一个元素。例如，如果你想要将一个弹出窗口定位于页面的中心，即便在某人向下滚动之后也是如此，那么，你需要确定访问者滚动了多远，并且移动弹出窗口，以使得很多额外元素位于页面的下方。在弹出工具的提示的例子中，当访问者已经向下滚动一个页面，要定位工具提示时，你需要小心：很容易意外地将工具提示放到页面空间中，但是，却在浏览器的视口中可见区域之外。使用scrollTop()来避免将一个工具提示放在浏览器窗口顶部的可视区域之上。

浅谈jQuery中的Ajax

浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

浅谈jquery关于select框的取值和赋值

浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法

如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

[原创]浅谈H5页面性能优化方法

[原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

[原创]浅谈H5页面性能测试

[原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W ...

[原创]浅谈H5页面测试介绍

[原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? ...

车大棒浅谈jQuery源码(二)

前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

浅谈WEB页面提速(前端向)

记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就 ...

随机推荐

dede无子栏目的栏目直接调用顶级栏目(不让调用的解决方法) noself=\'yes\'

大家在用dede做网站的时候经常会出现一个问题就是当调用子栏目的时候会出现无子栏目的栏目直接调用顶级栏目,   解决dede无子栏目时出现同级栏目的问题   {dede:channel type='s ...

UILabel用法

// UILabel -> UIView // UILabel用来显示文字内容 //创建一个Label,一般都直接通过initWithFrame确定位置跟大小 UILabel *lb = [[U ...

js request

比如你要获取aaa.aspx?id=2 使用方法为:var id= request('id');

std中map

在map中需要对位置a和b值进行交换,代码如下: auto val1 = tmpMap.at(a); auto val2 = tmpMap.at(b); tmpMap.insert(std::make ...

CCF系列之数字排序(201503-2)

问题描述试题编号: 201503-2试题名称: 数字排序时间限制: 1.0s内存限制: 256.0MB问题描述: 问题描述 给定n个整数,请统计出每个整数出现的次数,按出现次数从多到少的顺序输出. 输 ...

HotSpot虚拟机对象探秘(对象创建，对象内存布局，对象访问定位)

以常用的HotSpot虚拟机和JAVA内存区域堆为例,探讨对象的创建,对象的内存布局以及对象的访问定位 一.对象的创建 1)类加载:虚拟机遇到一条new指令时,先检测这个指令的参数能否在常量池中定位到 ...

【AtCoder】ARC076

ARC076 C - Reconciled? 如果\(N = M\) 答案是\(2N!M!\) 如果\(|N - M| = 1\) 答案是\(N!M!\) 否则答案是0 #include

linux tcp相关参数

/etc/sysctl.conf文件 /etc/sysctl.conf是一个允许你改变正在运行中的Linux系统的接口.它包含一些TCP/IP堆栈和虚拟内存系统的高级选项,可用来控制Linux网络配置 ...

Linux shell 计算两个文件的并集、交集、差集

假设我们现在有两个文件 a.txt .b.txt a.txt 中的内容如下: a c 1 3 d 4 b.txt 中的内容如下: a b e 2 1 5 # Example 01 计算并集: [roo ...

3.1 Makefile

安装make 安装make sudo apt-get install make make -v