jquery设置点击标签，标签滚动到页面顶部

预备知识：

（一）jQuery CSS 操作 - offset() 方法

参考地址：http://www.w3school.com.cn/jquery/css_offset.asp

实例

获得 <p> 元素当前的偏移：

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

定义和用法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回偏移坐标

返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

语法

$(selector).offset()

设置偏移坐标

设置所有匹配元素的偏移坐标。

语法

$(selector).offset(value)

（二）jQuery CSS 操作 - scrollTop() 方法

参考地址：http://www.w3school.com.cn/jquery/css_scrolltop.asp

实例

设置 <div> 元素中滚动条的垂直偏移：

$(".btn1").click(function(){
  $("div").scrollLeft(100);
});

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

提示和注释

注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

（三）jQuery 参考手册 - jQuery CSS 操作函数

参考地址：http://www.w3school.com.cn/jquery/jquery_ref_css.asp

css() 设置或返回匹配元素的样式属性。
height()         设置或返回匹配元素的高度。
offset()         返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft()         设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()         设置或返回匹配元素相对滚动条顶部的偏移。
width()         设置或返回匹配元素的宽度。

开始动手：

1.jsp页面标签元素

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<div id="excelgridDIV" style="text-align: center;">
	<div align="left" class="base_title impact1_title">
		<div id = "showDetail">
   		</div>
	</div>	
	<div id="excelgrid" class="mini-datagrid" style="width:100%;height:100%;" url="" fitColumns="false" showSummaryRow="true"
	showPager="false" pageSize="10000" ondrawsummarycell="onDrawSummaryCell" allowResize="false" allowMoveColumn="false">
		<div property="columns" >
	        <div headerAlign="center" type="indexcolumn">序号</div>                
	        <div field="name" width="300" headerAlign="center">指标名称</div>    
	        <div field="unit" width="60" align='center'  headerAlign="center">指标单位</div>
	        <div field="value" width="80px" align='right' headerAlign="center">指标值</div>
		</div>
	</div>
</div>

2.编写js

<script type="text/javascript">
	$("#excelgrid").click(function(){
		var excelgridDIV = $("#excelgridDIV").offset().top;	// - 174
    	$("body").scrollTop(excelgridDIV);
  	});
</script>

效果：点击id为excelgrid的div时，div移到最上方。