js实现页面滚动至指定位置

实现思路:

1、通过判断链接是否有某参数,来决定是否展示第二屏页面

2、用offset 来获取第二屏与文档顶部距离

3、用scrollTop 将滚动条 滚动至第二屏位置

if(location.href.indexOf('part') != -1){
$('html,body').animate({scrollTop:$('.bg2').offset().top}, 800);
}

一、offset()

offset()   返回或设置匹配元素相对于文档的偏移(位置)。

该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

x=$("p").offset().left;
y=$("p").offset().top;
$("p").offset({top:100,left:0}); //设置所有匹配元素的偏移坐标。

$("p").offset(function(n,c){  //使用函数来设置所有匹配元素的偏移坐标。
   newPos = new Object();
   newPos.left= c.left+100;
   newPos.top = c.top+100;
   return newPos;
});

二、关于scroll

1、scrollLeft()     返回或设置匹配元素的滚动条的水平位置【滚动条的水平位置指的是从其左侧滚动过的像素数】   

当滚动条位于最左侧时,位置是 0。

2、scrollTop()     返回或设置匹配元素的滚动条的垂直位置【滚动条相对于其顶部以像素计的偏移】。   

 延伸:

彻底搞懂clientHeight、offsetHeight、scrollHeight的区别

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

 

posted @ 2024-03-21 09:45  阳光下的向日葵  阅读(2231)  评论(0编辑  收藏  举报