首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >页面加载时以动画方式滚动到ID

页面加载时以动画方式滚动到ID
EN

Stack Overflow用户
提问于 2011-07-14 00:42:19
回答 3查看 327.1K关注 0票数 131

我正在尝试动画滚动到一个特定的ID页面加载。我做了很多研究,发现了这一点:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

但这似乎是从ID开始,并动画到页面顶部?

HTML (在页面的一半位置)是简单的:

<h2 id="title1">Title here</h2>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-07-14 00:46:36

您只需要滚动元素的高度。offset()返回元素相对于文档的坐标,top参数将提供元素沿y轴的距离(以像素为单位):

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

你也可以给它添加一个延迟:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
票数 341
EN

Stack Overflow用户

发布于 2013-08-13 05:45:04

有一个jquery插件可以做到这一点。它将文档滚动到一个特定的元素,因此它将恰好位于视区的中间。它还支持动画缓动,因此滚动效果看起来会非常流畅。检查this link

在您的例子中,代码是

$("#title1").animatedScroll({easing: "easeOutExpo"});
票数 3
EN

Stack Overflow用户

发布于 2018-07-06 15:12:59

对于简单的Scroll,使用以下样式

height: 200px;overflow:滚动;

并使用此样式类来显示滚动显示的div或section

票数 -3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6682451

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档