jquery中的scrollTop控制浏览器的滚动条

 jQuery获取的相关方法  jquery 获取滚动条高度

获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 :

$(window).width(); 获取页面的文档高度 :$(document).height(); 获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :

$(document).scrollTop(); 获取滚动条到左边的垂直宽度 :

$(document).scrollLeft();

计算元素位置和偏移量:

$(id).offset();

offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results)options.relativeTo  指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。options.scroll  是否把滚动条计算在内,默认TRUEoptions.padding  是否把padding计算在内,默认falseoptions.margin  是否把margin计算在内,默认trueoptions.border  是否把边框计算在内,默认true  使用js获取的相关方法  //回到页面顶部	$("#goTotop").click(function(){		$(‘body,html‘).animate({scrollTop:0},1500); //点击按钮让其回到页面顶部	});

$(window).scroll(function() {		var yheight1=window.pageYOffset; //滚动条距顶端的距离		var yheight=getScrollTop(); //滚动条距顶端的距离		var height =document.documentElement.clientHeight//浏览器可视化窗口的大小		var top=parseInt(yheight)+parseInt(height)-217;		var divobj=$(".kf");		divobj.attr(‘style‘,‘top:‘+top+‘px;‘);	})

/** * 获取滚动条距离顶端的距离 * @return {}支持IE6 */function getScrollTop() {		var scrollPos;		if (window.pageYOffset) {		scrollPos = window.pageYOffset; }		else if (document.compatMode && document.compatMode != ‘BackCompat‘)		{ scrollPos = document.documentElement.scrollTop; }		else if (document.body) { scrollPos = document.body.scrollTop; } 		return scrollPos; }

原文地址:https://www.cnblogs.com/buzhiheyan/p/8342039.html

时间: 2024-10-12 12:04:13

jquery中的scrollTop控制浏览器的滚动条的相关文章

jQuery中prop()函数控制多选框(全选,反选)

今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":checkbox").prop("checked"); //如果第一个checkbox被选中返回true,否则返回false. 禁用和选中页面上的所有复选框: $("input[type='checkbox']").prop("disabled"

jquery中ajax在firefox浏览器下“object XMLDocument”返回结果的解决办法

asp.net中借助jquery的ajax处理功能,使用起来很方便.但是在firefox下获得的data报错object XMLDocument.这是因为默认的情况下把datatype用html来解析了,所以只要设置一下datatype就可轻松解决了. $.ajax({ type: "get", cache: false, url: "/bubuko_checkLogin.aspx", data: "", dataType: "text

selenium对js的执行操作——selenium控制浏览器页面的滚动

调用JavaScript代码 虽然WebDriver提供了操作浏览器的前进和后退方法,但对于浏览器滚动条并没有提供相应的操作方法.在这种情况下,就可以借助JavaScript来控制浏览器的滚动条.WebDriver提供了execute_script()方法来执行JavaScript代码. 用于调整浏览器滚动条位置的JavaScript代码如下: window.scrollTo(0,450); window.scrollTo()方法用于设置浏览器窗口滚动条的水平和垂直位置.方法的第一个参数表示水平

jQuery中的事件和动画效果

刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高web应用程序的响应速度.(不做过多的讲解) 2.鼠标事件 鼠标事件就是用户在文档上移动或者点击时引发的操作. 1.click(); 2.mouseout(); 3.mouseout(); $(function () { $('li').on('mouseenter',function

jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html").animate({"scrollTop":top}): 只被Firefox支持,而不被chrome支持. 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop"

jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决

jQuery中animate()的方法可以去w3school查看,这里主要说一下: $("body").animate({"scrollTop":top}) 不被Firefox支持问题的解决. 其实是使用body的: $("body").animate({"scrollTop":top}) 只被chrome支持,而不被Firefox支持. 而使用html的: $("html").animate({"

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

锋利的jQuery ——jQuery中的DOM操作(三)

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"