一、窗体滚动条

1、获取窗体滚动条当前纵向和横向位置

  var currentY=$(document.body).scrollTop();//窗体滚动条纵向位置

  var currentX=$(document.body).scrollLeft();//窗体滚动条横向位置

2、设置窗体滚动条到指定位置

  var Y=想滚动到的垂直位置;

  var X=想滚动到的水平位置;

  $(window).scrollTop(Y);

  $(window).scrollLeft(X);

二、元素内滚动条;比如操作页面内一id为dataDiv的div标签

1、获取div元素内滚动条位置

  var currentY=$('#dataDiv').scrollTop();//div内滚动条纵向位置

  var currentX=$('#dataDiv').scrollLeft();//div内滚动条横向位置

2、设置div内滚动条到指定位置  

  var Y=想滚动到的垂直位置;

  var X=想滚动到的水平位置;

  $('#dataDiv').scrollTop(Y);

  $('#dataDiv').scrollLeft(X);

三、其他位置值

1、当前window可视内容区域高宽

window.innerHeight;//高

window.innerWidth;//宽

2、元素高宽以及相对于文档偏移量

$('#dataDiv').height();//元素高

$('#dataDiv').width();//元素宽

$('#dataDiv').offset().top;//元素相对文档顶部偏移量

$('#dataDiv').offset().left;//元素相对文档左边偏移量

  

jQuery操作滚动条的更多相关文章

  1. jquery操作滚动条滚动到指定位置

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  2. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  6. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  7. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  8. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  9. jquery操作iframe的方法:父页面和子页面相互操作的方法

    今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...

随机推荐

  1. FusionCharts V3图表导出图片和PDF属性说明(转)

    百闻不如一见,狠狠点击,快快下载:(演示文档有错误,不提供下载了.待新的演示文档出来.) 许多朋友说上面的DEMO用不了.fusioncharts官方的演示非常不错,就是来不及整理,各位大侠们可以研究 ...

  2. yum标准化安装nginx最新版

    yum标准化安装nginx最新版 cat > /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.o ...

  3. 对兼容ie浏览器所遇到的问题及总结

    1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规 ...

  4. [原]iBatis.Net(C#)系列一:简介及运行环境

    转载请注明http://www.cnblogs.com/13590/archive/2013/02/27/2934580.html 摘要:介绍iBatis.Net的基本情况和运行原理,运行环境中各参数 ...

  5. [Android] 【视频】黑马安卓62、66期等教程+源码

     下载地址:http://fu83.cn/thread-58-1-1.html

  6. python socket编程详细介绍

    Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它提供了服务器中心类,可以简化网络 ...

  7. 软件工程(QLGY2015)第二次作业点评(随机挑选20组点评)

    相关博文目录: 第一次作业点评 第二次作业点评 第三次作业点评 说明:随机挑选20组点评,大家可以看看blog名字,github项目名字,看看那种是更好的,可以学习,每个小组都会反应出一些问题,希望能 ...

  8. 【MPI学习3】MPI并行程序设计模式:不同通信模式MPI并行程序的设计

    学习了MPI四种通信模式 及其函数用法: (1)标准通信模式:MPI_SEND (2)缓存通信模式:MPI_BSEND (3)同步通信模式:MPI_SSEND (4)就绪通信模式:MPI_RSEND ...

  9. State Pattern -- 状态模式原理及实现(C++)

    主要参考<大话设计模式>和<设计模式:可复用面向对象软件的基础>两本书.本文介绍命令模式的实现. 问题出发点 在实际开发中,我们经常会遇到这种情况:一个对象有多种状态,在每一个 ...

  10. Java并发编程-ConcurrentHashMap

    特点: 将桶分段,并在某个段上加锁,提高并发能力 源码分析: V put(K key, int hash, V value, boolean onlyIfAbsent) { lock(); try { ...