`
nicegege
  • 浏览: 590868 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery的offset()和position()方法使用

 
阅读更多

1.jquery关于页面元素的位置和文档偏移距离提供了position和offset方法。

 

 

2.页面头部和底部的切换

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://geeboy.3vfree.net/app/2048game/jquery-2.1.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
//$("button[name='top']").css("margin-top",$("body").height()-$(this).height());
console.log($("input:button[name='top']").attr("name"));
$("input:button[name='top']").offset({left:0,top:$("body").height()});
$("input:button[name='bottom']").offset({left:0,top:0});
$("input").click(function(){
	var name=$(this).attr("name");
	if(name=="top"){
		//alert("top");
		//var body_scroll_height=$("body").attr("scrollHeight");
		//alert(body_scroll_height);
		//alert($("#contentDiv").scrollTop());
		$("body").scrollTop(0);
		//alert();
		//$("#contentDiv").attr("scrollBottom",0);
		
		//$('#cke_77_label').live('click', function() {
		//javascript:document.getElementsByTagName('BODY')[0].scrollTop=document.getElementsByTagName('BODY')[0].scrollHeight;
		//});
		
	}else if(name=="bottom"){
		//alert("bottom");
		//$("body").scrollTop(0);
		$("body").scrollTop($("body").height());
	}
});


});
</script>
</head>
<body style="height:2000px">
<input type="button" value="向上滑动" name="top" />
<input type="button" value="向下滑动" name="bottom"  />
<div style="width:400;height:400px;margin:40 auto;border:solid black 1px" id="contentDiv">
	<h1>滚动条上下滑动</h1>
	
</div>

</body>
</html>

 

分享到:
评论

相关推荐

    理解Jquery 的offset与position方法

    在jQuery中,`offset()`和`position()`方法是用来获取元素位置的重要工具,它们的主要区别在于参考对象的不同。理解这两个方法的用法对于进行精确的页面布局和动态效果处理至关重要。 `offset()`方法返回的是匹配...

    jQuery Position方法使用和兼容性

    首先,我们来详细探讨Position方法与jQuery中的另一个常用方法offset()之间的区别。offset()方法用于获取元素相对于文档的当前位置,其返回值包含元素的top和left属性。然而,Position方法返回的是相对于最近的定位...

    Jquery中offset()和position()的区别分析

    在进行网页开发时,定位元素是经常需要进行的操作,而在JQuery中,offset()和position()是用于获取元素位置的两个主要方法。它们虽然在某些情况下可以提供相似的结果,但这两个方法在使用上存在本质的区别。了解它们...

    Jquery中的offset()和position()深入剖析

    先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面,是怎么获得position()的: 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /

    jQuery.position()方法获取不到值的安全替换方法

    在jQuery中,获取元素位置的方法主要有两个:.position()和.offset()。.position()方法用于获取元素相对于其最近的已定位的父元素的位置,而.offset()方法则是获取相对于文档的绝对位置。然而,开发者在使用....

    点击文本框弹出日历的jquery代码和使用方法

    1. **创建日历元素**:使用jQuery创建一个包含日历的DOM结构,包括月份、星期和日期。 2. **设置样式**:应用CSS样式使日历看起来更美观,可以自定义颜色、字体等。 3. **绑定选择事件**:当用户点击某一天时,将...

    jQuery中offset()方法用法实例

    如果元素的position属性是static(默认值),使用offset()方法设置位置时,jQuery会自动将元素的position属性改为relative,这是设置相对于文档定位的关键。如果元素已经是relative、absolute或fixed定位,则更改...

    js实现jquery的offset()方法实例

    原生JavaScript没有直接提供类似于offset()的便捷方法来直接获取元素的绝对偏移位置,但我们可以通过一些其他属性和方法来间接获得。在文档对象模型(DOM)中,每个DOM节点都有offsetParent属性,该属性指向最近的...

    jQuery 常用方法

    jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将深入探讨jQuery中的常用方法,基于jQuery 1.4版本进行总结,帮助开发者更好地理解和应用这些功能。 ...

    jquery根据锚点offset值实现动画切换

    本文介绍了如何使用jQuery结合锚点的offset值来实现平滑的动画页面切换效果。通常情况下,页面的跳转都是瞬间完成的,用户体验可能会感到突兀和不友好。通过动画效果可以极大提升用户体验,使得页面切换看起来更加...

    offset jquery

    在本篇文章中,我们将深入探讨一个与jQuery相关的代码片段,该片段主要关注于如何使用`offset()`方法来获取DOM元素的位置,并进一步利用这些位置信息来调整另一个元素的样式。此段代码通过设置变量`termInput`来引用...

    jquery用offset()方法获得元素的xy坐标

    除了offset()方法,jQuery还提供了position()方法,它用于获取元素相对于最近的已定位的父元素(即设置了position属性为relative、absolute或fixed的父元素)的偏移量。position()方法通常返回一个包含top和left属性...

    jQuery position() 函数详解以及jQuery中position函数的应用

    总的来说,`jQuery.position()`函数是一个强大的工具,能够帮助开发者精确地获取和控制页面元素的位置。正确理解和使用它,可以提高网页动态布局的灵活性和用户体验。在处理动态定位、动画效果或响应式设计时,`...

    浅谈jQuery的offset()方法及示例分享

    对于希望深入学习 jQuery 的开发者而言,掌握 offset() 方法的使用能够帮助他们更好地控制页面元素的位置,从而创建更加动态和交互性强的网站界面。由于 offset() 方法处理的是文档级别的元素位置,因此它在处理整个...

    [原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

    - **设置值用法**:当`.offset()`方法被用于设置值时,可以传递一个对象参数,包含`left`和`top`属性,或者使用一个函数返回这个对象。需要注意的是,`.offset()`只能应用于可见元素,并且在设置值时,该元素不能是`...

    jQuery实现表头固定表格内容滚动效果

    `jQuery`作为一个广泛使用的JavaScript库,提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构...

    jQuery jQuery-UI

    5. **定位**:包含了实用的定位算法,如`.position()`和`.offset()`,用于精确控制元素的位置。 **文件内容概览** - **licence_gpl.txt, license_commercial.txt**:这两个文件可能分别包含了GPL(GNU General ...

Global site tag (gtag.js) - Google Analytics