Question

在页面加载时将滚动设置为特定ID的动画。我做了很多研究并发现了这个：

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

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

HTML（位于页面的一半）只是：

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

Answer 1

您只是滚动元素的高度。 offset()返回元素相对于文档的坐标，top param将为您提供元素沿y轴的像素距离：

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

您还可以添加延迟：

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

Answer 2

具有scrollIntoView()功能的纯JavaScript解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

P.S。＆＃39;平滑＆＃39;参数现在可以在Chrome 61中用作评论中提到的 julien_c 。

Answer 3

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

jquery-animate-body-for-all-browsers

Answer 4

有一个jquery插件。它将文档滚动到特定元素，以便它完美地位于视口中间。它还支持动画缓动，使滚动效果看起来非常流畅。检查this link。

在您的情况下，代码是

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

Answer 5

尝试使用以下代码。使用类名页面滚动创建元素，并将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();
    });

Answer 6

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

高度：200像素；溢出：滚动；

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

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

6 个答案: