js 跳转至指定位置

最新推荐文章于 2025-05-31 09:35:27 发布

原创最新推荐文章于 2025-05-31 09:35:27 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

前端(废弃了) 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了三种网页内部跳转的技术方案：锚点链接、JavaScript的scrollIntoView方法及animate属性配合scrollTop属性实现平滑滚动。锚点链接简单易用但刷新时存在问题；scrollIntoView方法则能更精确地控制元素滚动到可视区域；animate属性实现更为平滑的过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：给链接a加个#的方式来实现跳转。（锚点方法）

div {
height: 800px;
width: 400px;
border: 2px solid black;
}
#container{
position: fixed;
margin:50px 500px;
}

该锚点法，不需要任何的js代码，即可实现跳转的方法。缺点：点击链接url发生变化，刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用，对于.cshtml页面不起作用。

方法二：用js的srollIntoView方法进行使用

var tar=$("form").find(".Validform_wrong").eq(0).parent().parent();
tar[0].scrollIntoView(true);

方法三：用animate属性，当点击锚点后，页面滚动到相应的DIV。原理是修改页面的scrollTop

var tar=$("form").find(".Validform_wrong").eq(0).parent().parent();
$("html,body").animate({scrollTop:tar.offset().top-$("header").height()-tar.height()},500);