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 @   阳光下的向日葵  阅读(2293)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示