本文描述了jQuery将div中的滚动条滚动到指定位置的方法。分享给你，供你参考，如下:
一、Js代码:
onload = function () {
//初始化
scrollToLocation()；
};
函数scrollToLocation() {
var ***in container = $(‘# thisMainPanel & # 8217),
scrollToContainer = ***in container . find(‘。子面板:最后’);//滚动到<>
//scrollToContainer = ***in container . find(‘。子面板:等式(5)’);//滚动到<>
//非动画效果
//***inContainer.scrollTop(
// scrollToContainer.offset()。top & # 8211***inContainer.offset()。top + ***inContainer.scrollTop()
//);
//动画效果
***inContainer.ani***te({
scroll top:scrolltocontainer . offset()。top & # 8211***inContainer.offset()。top + ***inContainer.scrollTop()
}, 2000);//2秒滑动到指定位置
}
1234567891011121314151617
二。Html代码:
& ltdiv id = & # 8221这个主面板”style = & # 8221高度:200px溢出-y:滚动；边框:1px纯色# f3f3f3”& gt
& ltdiv class = & # 8221子面板”& gt我的分类区域是-1吗
& ltdiv class = & # 8221子面板”& gt我的类别是区域2吗
& ltdiv class = & # 8221子面板”& gt我的类别是3区吗
& ltdiv class = & # 8221子面板”& gt我的类别是4区吗
& ltdiv class = & # 8221子面板”style = & # 8221高度:160px”& gt我的分类区域是-5吗
& ltdiv class = & # 8221子面板”& gt我是类别区-6
& ltdiv class = & # 8221子面板”& gt我是类别区-7
& ltdiv class = & # 8221子面板”& gt我是第八类
& lt/div >
12345678910
三。相关知识
在javascript中制作滚动代码的常见属性
1.网页可视区域的宽度:document . body . client width；
可见区高:
document . body . client height；
可见网页的宽度:document.body.offsetWidth(包括边的宽度)；
可视区域的高度:
document . body . offset height(包括边缘的宽度)；
网页的全宽:document . body . scroll width；
网页全文高:
document . body . scroll height；
网页高度一扫:document . body . scroll top；
被卷开的网页左边:document . body . scroll left；
在主页面:window.screenTop
网页左边部分:window.screenLeft
屏幕分辨率的高度:window . screen . height；
屏幕分辨率的宽度:window . screen . width；
屏幕上可用工作空间的高度:window . screen . avail height；
2.假设obj是一个HTML控件。
Obj.offsetTop是指Obj距上层或上层控件的位置，整数，单位像素。
Obj.offsetLeft指的是Obj距离左侧或上方控件的位置，整数，单位像素。
Obj.offsetWidth是指Obj控件本身的宽度、整数和单位像素。
Obj.offsetHeight是指Obj控件本身的高度，整数，单位像素。
我们来解释一下上面提到的“上或上”和“左或上”控件。
例如:
& ltdiv id = " tool " & gt
& ltType = "button" value = "submit " >:
& ltType = "button" value = "reset " >:
& lt/div >
1234
提交按钮的OffsetTop是指提交按钮与工具层上边框之间的距离，因为工具层上边框离它最近。
重置按钮的OffsetTop是指重置按钮与工具层上边框之间的距离，因为工具层的上边框离它最近。
提交按钮的OffsetLeft指的是提交按钮与工具层左边界的距离，因为离它左边最近的就是工具层的左边界。
重置按钮的OffsetLeft指的是重置按钮和提交按钮右边框之间的距离，因为提交按钮的右边框离它的左边最近。
上述属性在FireFox中也有效。
3.3.offsetTop和style.top的区别
初步知识:偏顶、偏左、偏宽、偏高
我们知道offsetTop可以从上层或者外层元素获取HTML元素的位置，style.top也是可以的。两者的区别在于:
(1)offsetTop返回一个数字，而style.top返回一个字符串，除了数字之外，还有单位:px。
(2)offsetTop是只读的，而style.top可以读写。
(3)如果没有为HTML元素指定top样式，则style.top返回空字符串。
offsetLeft和style.left、offsetWidth和style.width、offsetHeight和style.height也是如此
offsetWidth和style.width属性的区别在于，如果对象的宽度设置为百分比宽度，则无论页面是大还是小，style.width都将返回此百分比，而offsetWidth将返回不同页面中对象的宽度值，而不是百分比值。
scrollLeft:
在当前窗口显示的范围内，从对象最左边到对象左边的距离。
也就是说，在水平滚动条的情况下，滚动条被拉动的距离。
滚动顶部
从对象顶部到当前窗口中对象顶部边缘的距离。
也就是说，在垂直滚动条的情况下，滚动条被拉动的距离。
本文来自Total.不想长大投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/499040.html
微信扫一扫 
