scrolltop是jQuery中的一个方法，它可以设置 <div>元素中滚动条的垂直偏移量，基本的用法是：
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
工具原料：jQuery、编辑器、浏览器
1、在一个有内容的div中是吸纳设置滚动条的偏移量和获取偏移量的值，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").scrollTop(100)
})
$(".btn2").click(function(){
alert($("div").scrollTop()+" px")
})
})
</script>
</head>
<body>
<div style="border:1px solid blackwidth:200pxheight:200pxoverflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>
2、运行的效果如下：
点击设置为100px后的效果：
点击获取值的效果：
点击回顶部，或是回某个位置，主要是设置scrollTop。
下面是一个简单回顶的例子：
下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。
<style>body{height:5000px}
input {position:fixed bottom:0px right:0px}
</style>
<script>
window.onload=function(){
var oBtn = document.getElementById('btn')
var timer = null
var bFlag = false
oBtn.onclick=function(){
moveScroll(0,3000)
}
window.onscroll=function(){
if(bFlag)
{
clearInterval(timer)
}
bFlag=true
}
function moveScroll(target,time)
{
var start = document.documentElement.scrollTop || document.body.scrollTop
var dis = target - start
var count = Math.floor(time/30)
var n=0
clearInterval(timer)
timer = setInterval(function(){
n++
bFlag=false
document.documentElement.scrollTop = start + dis*n/count
document.body.scrollTop = start+dis*n/count
if(n==count)
{
clearInterval(timer)
}
},30)
}
}
</script>
可以在head中加入个锚点，然后锚点定位在最底部就可以了<script>window.location ="#zhidao"//自动跳转到锚点处</script>底部锚点：<a name="zhidao"></a><!--锚点处-->欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）