在页面加载时将动画滚动到ID

123

试图在页面加载时将滚动动画化为特定的ID。我做了很多研究，并发现了这一点：

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

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

HTML（位于页面的一半）很简单：

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

jquery scroll jquery-animate

— 阿迪
source

1

这并不是一个很好的答案，但是我强烈推荐Ariel Flesler的“ scrollTo”插件。它具有用于平移页面的许多功能，以及在一些常见情况下对该插件的一些扩展（例如，如果它在同一页面上，则可能会发现他的“ LocalScroll”插件对于滚动到链接的href很有用）。您可以在此处获取插件：flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

您仅滚动元素的高度。offset（）返回元素相对于文档的坐标，而topparam将为您提供沿y轴的元素距离（以像素为单位）：

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

您还可以添加延迟：

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

— 大黄蜂
source

1

自动滚动使我进入“哇酷！”的含义是什么？也许这是您解决方案的简单性。

— theblang 2013年

我需要在页面加载时将一个元素滚动到视图中，但是有两个问题：a）使用“ html，body”给出了两个回调（每个匹配的元素一个）。b）取决于浏览器的body或html起作用。因此，我提出了一个要点，您可以在项目中使用该要点，以确保在“任何”浏览器上都可以滚动查看，并且动画结束时您只会得到一个回调。gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

这是不正确的。您确实应该考虑我们要尝试的主体或元素的当前滚动位置scroll。考虑到这一点，您可以将当前的滚动位置添加body到offset().top我们要在视图中看到的元素的位置，结果总和就是我们要滚动到的值。$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg您尝试过吗？如果当前滚动位置大于0，则您的建议可能不起作用。假设可滚动容器的高度为1000像素，当前滚动位置为1000。假设要滚动的元素位于垂直中心500处。，对？

— BumbleB2na '17

@ BumbleB2na .offset().top在这种情况下会给您一个负数。这实际上仅适用于body，html因为offset().top它将为您提供文档的最高偏移量，而不是预期的滚动父级。

— mattdevio

12

具有scrollIntoView（）函数的纯JavaScript解决方案：

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

展开摘要

PS'smooth '参数现在可以在Chrome 61中使用，就像注释中提到的julien_c一样。

— 弗拉基米尔·沃夫克
source

1

现在可以使用（来自Chrome 61）

— julien_c

确保检查浏览器的兼容性。从10/2018 IE（11）开始，Edge和Safari支持“ scrollIntoView”，但不支持“ smooth”选项。

— metal_jacke1

纯JS ftw。谢谢你的摘录！光滑如双黄油奶油

— 让- ARME

4

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

所有浏览器的jquery-animate-body。

— AleX灰色
source

3

有一个jQuery插件。它将文档滚动到特定元素，以使其完美地位于视口中间。它还支持动画缓动，以便滚动效果看起来超级流畅。检查此链接。

您的情况是

$("#title1").animatedScroll({easing: "easeOutExpo"});

— 尤金·蒂林（Eugene Tiurin）
source

“它还支持动画缓动，以便滚动效果看起来超级平滑”。不幸的是，事实并非如此。如果计算机由于某种原因而运行缓慢，它只会继续跳动而实际上无法正常移动。

— brunoais 2014年

平滑滚动需要计算很多像素。当然，由于缺少足够的ALU，速度较慢的“计算机”（更多的GPU）无法做到这一点。所以总的来说他是对的。而且真的很容易滚动lib。

— 罗兰

1

尝试以下代码。使用类名page-scroll制作元素，并将ID名称保留href为相应链接

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— 阿基尔
source

-3

对于简单的滚动，请使用以下样式

高度：200px；溢出：滚动；

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

— 毫米
source