jquery控制滚动条位置(jq滚动条滚动指定位置)
jquery怎么设置滚动条的位置
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话，会被改成relative来实现重定位。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
/ Get *real* offsetParent
var offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, ’marginTop’ );
offset.left -= num( this, ’marginLeft’ );
// Add offsetParent borders
parentOffset.top += num( offsetParent, ’borderTopWidth’ );
parentOffset.left += num( offsetParent, ’borderLeftWidth’ );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移
如何用js或jquery控制滚动条到指定位置
请使用
fullPage.js插件。可以自行百度一下。
参考代码：
!DOCTYPE?html
html
????head
????????meta?charset="UTF-8"
????????style?type="text/css"
????????????body?{
????????????????color:?#FFFFFF;
????????????}
????????????
????????????.section1?{
????????????????background-color:?#BFDA00;
????????????}
????????????
????????????.section2?{
????????????????background-color:?#2EBE21;
????????????}
????????????
????????????.section3?{
????????????????background-color:?#2C3E50;
????????????}
????????/style
????????title/title
????????link?rel="stylesheet"?href="css/jquery.fullPage.css"?/
????????script?type="text/javascript"?src="../../js/jquery.js"/script
????????script?type="text/javascript"?src="js/jquery.fullPage.js"/script
????????script
????????????$(function()?{
?????????????????$("#ido").fullpage();
????????????});
????????/script
????/head
????body
????????
????????div?id="ido"
????div?class="section?section1"
????????h1每一个section是一屏，这是第一屏/h3
????/div
????div?class="section?section2"
????????h1每一个section是一屏，这是第二屏/h3
????/div
????div?class="section?section3?active"
????????h1每一个section是一屏，这是第三屏/h3
????/div
????div?class="section?section4"
????????h1每一个section是一屏，这是第四屏/h3
????/div
/div
????/body
/html
css? js 自己引用啊
如何通过JQuery将DIV的滚动条滚动到指定的位置
script type="text/javascript"
$(document).ready(function(e) {
$("body").animate({scrollTop:200},1000);
$("body").scrollTop(200);
});
/script
//上面的scrollTop就是我们滚动条的位置，后面的1000，时间就是我们滚动的时间
//如果不想滚动，而是一打开就可以就用下面的代码
$(document).ready(function(e) {
$("body").scrollTop(200);
});
/script
jQuery实现将div中滚动条滚动到指定位置的方法
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：
一、Js代码：
onload
=
function
()
{
//初始化
scrollToLocation();
};
function
scrollToLocation()
{
var
mainContainer
=
$('#thisMainPanel'),
scrollToContainer
=
mainContainer.find('.son-panel:last');//滚动到div
id="thisMainPanel"中类名为son-panel的最后一个div处
//scrollToContainer
=
mainContainer.find('.son-panel:eq(5)');//滚动到div
id="thisMainPanel"中类名为son-panel的第六个处
//非动画效果
//mainContainer.scrollTop(
//
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
//);
//动画效果
mainContainer.animate({
scrollTop:
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
},
2000);//2秒滑动到指定位置
}
二、Html代码：
div
id="thisMainPanel"
style="height:200px;overflow-y:
scroll;border:1px
solid
#f3f3f3;"
div
class="son-panel"我是类容区域-1/div
div
class="son-panel"我是类容区域-2/div
div
class="son-panel"我是类容区域-3/div
div
class="son-panel"我是类容区域-4/div
div
class="son-panel"
style="height:160px;"我是类容区域-5/div
div
class="son-panel"我是类容区域-6/div
div
class="son-panel"我是类容区域-7/div
div
class="son-panel"我是类容区域-8/div
/div
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery
form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jquery获取滚动条高度和位置
1、首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。
2、然后在上方引入jQuery的脚本，编辑js脚本，使用bind方法绑定浏览器的scroll事件，监听网页滚动，之后用scrollTop()获取垂直滚动距离，最后弹出输出的值即可。
3、保存一下打开浏览器，可以看到一个长篇的文档。
4、按F12打开浏览器开发者工具，切换到Console标签下，滚动鼠标，就可以在开发者工具里显示出浏览器高度位置的数据了。