js?scrollTop如何到达指定位置

发布网友发布时间：2小时前

共1个回答

热心网友时间：2024-12-12 23:59

在JavaScript中，我们可以使用scrollTop属性来实现页面滚动至指定位置的功能。这种方法主要通过改变scrollTop值来实现平滑滚动效果，使页面能够平滑地到达用户指定的位置。例如，如果你想实现返回顶部的功能，可以将参数target设置为0。以下是一个简单的示例代码：

javascript
goTo = function(target) {
var scrollT = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollT > target) {
var timer = setInterval(function() {
var scrollT = document.body.scrollTop || document.documentElement.scrollTop;
var step = Math.floor(-scrollT / 6);
document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
if (scrollT == target) {
document.body.scrollTop = document.documentElement.scrollTop = target;
clearTimeout(timer);
}
}, 20);
} else if (scrollT == 0) {
var timer = setInterval(function() {
var scrollT = document.body.scrollTop || document.documentElement.scrollTop;
var step = Math.floor(300 / 3 * 0.7);
document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
if (scrollT == target) {
document.body.scrollTop = document.documentElement.scrollTop = target;
clearTimeout(timer);
}
}, 20);
} else if (scrollT < target) {
var timer = setInterval(function() {
var scrollT = document.body.scrollTop || document.documentElement.scrollTop;
var step = Math.floor(scrollT / 6);
document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
if (scrollT == target) {
document.body.scrollTop = document.documentElement.scrollTop = target;
clearTimeout(timer);
}
}, 20);
} else if (target == scrollT) {
return false;
}
}

在使用时，可以给HTML元素绑定点击事件，从而触发滚动到指定位置的方法。例如：

javascript
function(target) / / 目前唯一target（目标距离number），
on(goPs,'click',function(){ goTo(2450) }); //运动到scrolltop值为2450地位置
on(goJob,'click',function(){ goTo(3373) })
on(goTel,'click',function(){ buffer.goTo(3373) })
on(goMe,'click',function(){ buffer.goTo(1539) })
on(goHome,'click',function(){ buffer.goTo(0) })
on(scrollgoOne,'click',function(){ buffer.goTo(2450) })
on(scrollgoPc,'click',function(){ buffer.goTo(2450) })
on(scrollJob,'click',function(){ buffer.goTo(3373) })
on(scrollMe,'click',function(){ buffer.goTo(1539) })
on(goTop,'click',function(){ buffer.goTo(0) })

接下来，我们来了解一下在不同浏览器中如何获取scrollTop值。在处理兼容性问题时，我们需要根据不同浏览器的特点来获取scrollTop值。具体如下：

1. IE6/7/8：对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；

2. Safari：Safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；

3. Firefox：火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；

为了在任何浏览器下都能获取到正确的scrollTop值，可以使用以下代码：

javascript
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

这句代码通过或运算符来获取scrollTop值，确保在各种浏览器下都能正常工作。其中，`window.pageYOffset`被放置在或运算的中间位置，当页面滚动条在最顶端时，IE下的`window.pageYOffset`返回为`undefined`，此时将`window.pageYOffset`放在或运算最后面时，scrollTop会返回`undefined`，这会导致后续的运算出错。而其他浏览器无论scrollTop赋值或运算顺序如何都不会返回`undefined`，可以安全使用。

以上就是关于`scrollTop`到达指定位置的相关知识，希望对你有所帮助。