jquery滚动条事件（如何用jquery实现页面滚动到指定位置后触发事件的效果）

本文目录

• 如何用jquery实现页面滚动到指定位置后触发事件的效果
• jquery滚动监听滚动一次触发多次事件，怎么解决
• jquery怎么判断滚动条滚到页面底部并执行事件
• jQuery 滚动条高度触发事件
• 请教jquery的$window.scroll事件

如何用jquery实现页面滚动到指定位置后触发事件的效果

方法：

$(function() {
$(“.div_md a“).click(function() {
$(“html, body“).animate({
scrollTop: $($(this).attr(“href“)).offset().top - 100 + “px“
}, 1500);
return false;
});
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(“.div_md“);
var offSet = getDiv_md.offset().top;
$(window).scroll(function(){
if ($(window).scrollTop() 》 offSet){
$(“.div_md“).css({“position“:“fixed“,“left“:“10px“,“top“:“10px“,“z-index“:“2“});
}else{
$(“.div_md“).css({“position“:““,“left“:“0px“,“top“:““,“z-index“:““});
}
})
});

1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、编程工具

Notepad++：一套有特色的自由软件的纯文字器，有完整的中文化接口及支持多国语言编写的功能。它的功能比Windows中的 Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作编写电脑程序的器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

Brackets：一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 （IDE工具）。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持Windows、Linux平台。Brackets的特点是简约、优雅、快捷，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。

JS Nice：一款让经过混淆处理的JavaScript代码可读更好的工具。它使用一种用于JavaScript代码美化的去混淆和去压缩引擎。JSNice采用先进的机器学习和程序分析技术，从可用的开源项目学习命名和类型规律。

jquery滚动监听滚动一次触发多次事件，怎么解决

可以声明一个变量，在触发事件的适合给变量复制，事件处理完后再赋另外值，滚动事件里面每次都去验证这个变量就可以 。

可以参考下这个异步加载的网页链接

jquery怎么判断滚动条滚到页面底部并执行事件

首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。
scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。
举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。
理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。
首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。
这个区间是：[0, (offsetHeight - clientHeight)]
即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端：scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内：(offsetHeight – clientHeight) – scrollTop 《= 50
3、在滚动条距离底端5%以内：scrollTop / (offsetHeight – clientHeight) 》= 0.95
如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件：
[javascript] view plain copy
在CODE上查看代码片派生到我的代码片
scrollBottomTest =function(){
$(“#contain“).scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
//if(contentH - viewH - scrollTop 《= 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)》=0.95){ //到达底部100px时,加载新内容
// 这里加载数据..
}
});
}

jQuery 滚动条高度触发事件

var wh=$(window).height();
$(window).scroll(function(){
var s=wh-$(window).scrollTop();
if(s《800){
alert(“小于800了“)
}

});

请教jquery的$window.scroll事件

　　这篇文章主要介绍了jQuery
scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可以参考下

　　scroll事件适用于window对象，但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

　　复制代码
代码如下:

$(document).ready(function () {
//本人习惯这样写了
$(window).scroll(function () {

//$(window).scrollTop()这个方法是当前滚动条滚动的距离

//$(window).height()获取当前窗体的高度

//$(document).height()获取当前文档的高度
var bot = 50;
//bot是底部距离的高度
if ((bot + $(window).scrollTop()) 》=
($(document).height() - $(window).height())) {

//当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
//我们需要去异步加载数据了

$.getJSON(“url“, { page: “2“ }, function (str) { alert(str); });

}
});
});

　　注意：(window).height()和(document).height()的区别

　　jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

　　注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height()
随之改变，但是jQuery(document).height()是不变的。

　　复制代码
代码如下:

　　$(document).scrollTop() 获取垂直滚动的距离
即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

　　要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

　　要获取底端 只要获取scrollTop()》=$(document).height()-$(window).height()
就可以知道已经滚动到底端了

　　复制代码
代码如下:

$(document).height()
//是获取整个页面的高度
$(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度
这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧

自己做个实验就知道了

　　复制代码
代码如下:

$(document).scroll(function(){

$(“#lb“).text($(document).scrollTop());
})
《span id=“lb“
style=“top:100px;left:100px;position:fixed;“》《/span》《!--一个固定的span标记
滚动时方便查看--》