在js中怎么设置滚动条滚动的距离

jQuery获取的相关方法

jquery 获取滚动条高度

获取浏览器显示区域的高度 ： 

$(window)height(); 

获取浏览器显示区域的宽度 ：

$(window)width(); 

获取页面的文档高度 ：

$(document)height(); 

获取页面的文档宽度 ：$(document)width();

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

$(document)scrollTop(); 

获取滚动条到左边的垂直宽度 ：

$(document)scrollLeft();

计算元素位置和偏移量：

$(id)offset();

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

offset(options, results)

optionsrelativeTo指定相对计

算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

optionsscroll是否把

滚动条计算在内，默认TRUE

optionspadding是否把padding计算在内，默认false

optionsmargin

是否把margin计算在内，默认true

optionsborder是否把边框计算在内，默认true

使用js获取的相关方法

//回到页面顶部

$("#goTotop")click(function(){

$('body,html')animate({scrollTop:0},1500); //点击按钮让其回到页面顶部

});

$(window)scroll(function() {

var yheight1=windowpageYOffset; //滚动条距顶端的距离

var yheight=getScrollTop(); //滚动条距顶端的距离

var height =documentdocumentElementclientHeight//浏览器可视化窗口的大小

var top=parseInt(yheight)+parseInt(height)-217;

var divobj=$("kf");

divobjattr('style','top:'+top+'px;');

})

/

  获取滚动条距离顶端的距离

  @return {}支持IE6

 /

function getScrollTop() {

var scrollPos;

if (windowpageYOffset) {

scrollPos = windowpageYOffset; }

else if (documentcompatMode && documentcompatMode != 'BackCompat')

{ scrollPos = documentdocumentElementscrollTop; }

else if (documentbody) { scrollPos = documentbodyscrollTop; } 

return scrollPos; 

}

先来一张名气很大的图

看着实在是好晕，于是各种整理后手动画了一个：

发现主要分为几部分：

当定位时，position的移动的距离，

scrollHeight:文档总高度，可滚动总高度（包含元素本身，内外边距，边框）

scrollWidth:文档总宽度，可滚动总宽度（包含元素本身，内外边距，边框）

scrollTop:相对于滚动条顶部的偏移，指滚动条顶端与当前滚动条位置的距离

scrollLeft:相当于滚动与左端的偏移

clientHeight:可视区域高度（不包含边框，滚动条）

clientWidth:可视区域宽度

clientTop:内容区域相对于整个元素的左上角，当有边距时为边距的厚度，无边距时可以为0

clientLeft:内容区域相对于整个区域的左上角，有边距时为边距的宽度，可以为0

offsetHeight:获取自身元素（包含边距，滚动条）

offsetWidth:获取自身元素（包含边距，滚动条）

offsetTop:相对于最近定位祖元素的偏移，（祖元素必须是position,relative,absloute,fixed）

offsetLeft:同offsetTop

返回第一个祖定位元素，若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。

获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较

在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法

一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现

在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element) {

var actualLeft = element offsetLeft

actualTop = element offsetTop

current = element offsetParent; // 取得元素的offsetParent

// 一直循环直到根元素

while (current !== null) {

actualLeft += current offsetLeft;

actualTop += current offsetTop;

current = current offsetParent;

}

// 返回包含left top坐标的对象

return {

left: actualLeft

top: actualTop

};

}

例子截图

firebug下测试结果截图 (注 其他浏览器已通过测试!)

二 通过 getBoundingClientRect() 方法实现

getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element){

var dc = document

rec = element getBoundingClientRect()

_x = rec left // 获取元素相对浏览器视窗window的左 上坐标

_y = rec top;

// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置

_x += dc documentElement scrollLeft || dc body scrollLeft;

_y += dc documentElement scrollTop || dc body scrollTop;

return {

left: _x

top: _y

};

}

经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异

注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!

lishixinzhi/Article/program/Java/JSP/201311/20207

offset 自己的

目的： js中有一套方便的获取元素尺寸的办法就是offset家族；

div { width:220px; border-left:2px solid red; padding:10px;}

divoffsetWidth = 220 + 2 + 20

为什么不用 divstylewidth 因为东西 只能得到行内的数值

如果 父级 都没有定位则以body 为准

这里的父级指的是所上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。

offsetParent返回该对象的父级 （带有定位） 不一定是亲的爸爸

前面学过一个返回父亲(亲的) parentNode 有所区别

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

1．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 styletop 不可以 只有定位的盒子 才有 left top right

2．offsetTop 返回的是数字，而 styletop 返回的是字符串，除了数字外还带有单位：px。

3．offsetTop 只读，而 styletop 可读写。

4．如果没有给 HTML 元素指定过 top 样式，则 styletop 返回的是空字符串。

5．最重要的区别 styleleft 只能得到 行内样式 offsetLeft 随便

我们学过一些事件 : onmouseover onmouseout onclick

event 单词翻译过来 事件 的意思

event 就是事件的对象 指向的是 事件 是 onclick

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标 *** 作时候，会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持 event

ie 678 支持 windowevent

是以我们的 电脑屏幕 为基准点 测量

以我们的 文档 （绝对定位） 的基准点 对齐

ie678 不认识

以 可视区域 为基准点 类似于 固定定位

onmouseover onmouseout onclick

onmousemove 当鼠标移动的时候 就是说，鼠标移动一像素就会执行的事件

divonmousemove = function() { 语句 }

当鼠标再div 身上移动的时候，就会执行。

他们相同点 都是 经过 div 才会触发

divonmouseover 只触发一次

divonmousemove 每移动一像素，就会触发一次

onmouseup 当鼠标d起

onmousedown 当鼠标按下的时候

1拖动 原理 == 鼠标按下 接着 移动鼠标 。

baronmousedown = function(){

documentonmousemove = function(){

}

}

2当我们按下鼠标的时候，就要记录当前 鼠标 的位置 - 大盒子的位置

算出 bar 当前 在 大盒子内的距离 。

我们知道 按下鼠标然后拖拽可以选择文字 的。

清除选中的内容

offset 自己的 偏移

offsetWidth 得到自己的宽度

offsetHeight

构成 ： width + padding + border

div width 200 border 3px padding-right: 15px

div offsetWidth = 200 + 6 + 15 = 221

◆ offsetLeft 和 offsetTop

divoffsetLeft

得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离

◆ offsetParent 返回自己的父亲元素 （带有定位的）

parentNode 这个返回亲父亲 不管父亲是否带有定位

◆ styletop 和 offsetTop

offsetTop 只读 只可以得到结果 但是不能赋值

styletop 能得到 （行内式 ） 但是可以给值

styletop 得到的是 25px

offsetTop 得到的是 25

◆ 事件对象 event

divonclick = function(event) { } event 是点击的事件对象

event 集合点击事件的相关信息

pageX 文档的 参考点

clientX 可视区域

ScreenX 屏幕

◆ 常用事件

onmouseover 经过

onmouseout 离开

onmousemove 鼠标移动

var num = 0;

divonmouseover = function() { num++; consolelog(num))} 1

divonmousemove = function() { num++; consolelog(num))}

onmousedown 按下鼠标

onmouseup d起鼠标

拖拽： 先按下鼠标 然后 移动鼠标

baronmousedown = funtion() {

documentonmousemove = function() {}

}

最大 window 对象 document对象

今日案例：筋斗云、点击跟随鼠标、放大镜案例素材获取

链接： > 密码：homu

获取当前元素可视区域的宽高(内容的宽高 + 左右/上下的padding),如果有小数，值四舍五入

注意：和内容是否有溢出无关(和是否设置了overflow: hidden也无关)，就是我们自己设定的内容的宽高+padding

获取上/左边框的宽度

在client基础上加上border

当前盒子的父级参照物

获取当前盒子距离父级参照物的偏移量(上偏移/左偏移),从当前盒子的外边框开始到父级参照物的内边框

如果没有内容溢出的情况下，等于内容宽高 + padding；如果有内容溢出无overflow: hidden的情况下，等于真实内容的宽高 + 左/上padding(下/右padding被真实内容占了)；如果有内容溢出并且有overflow: hidden的情况下，等于真实内容宽高 + padding。

注意：它是一个约等于的值，因为在不同浏览器显示不同的数值

滚动条卷去的高度

在js盒子模型13个属性中，只有scrollTop/scrollLeft是"可读写"属性，其余都是"只读"属性

这能获取所有写在元素行内上的样式，不写在行内上，不管你写没写都获取不到，真实项目中我们很少把样式写在行内

经过计算的样式: 只要当前元素可以在页面中呈现(或者浏览器渲染它了),那么它的样式都是被计算过的

不管当前样式写在哪

不管你是否写了(浏览器会给元素设置一些默认样式)

在标准浏览器中(IE9+)

以上就是关于在js中怎么设置滚动条滚动的距离全部的内容，包括:在js中怎么设置滚动条滚动的距离、jsz中scrollTop,clientTop,offsetTop、js获取元素到文档区域document的坐标方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！