Question

当页面加载时，我试图向上滚动标题3。基本上，标题3应显示在页面的最顶部位置。

我正在使用它：

$(function(){
 $('body').animate({
     scrollTop: $(":header3").offset().top
}, 500);
});

同样，如果我使用标题4，则滚动条应该关闭，标题4应显示在页面的最顶部位置。

但滚动不会发生。不确定为什么？

这是一个小提琴http://jsfiddle.net/xdaf7o3b/

Answer 1

如果要滚动到页面上任意排序的第三个标题（h1，h2，h3，h4等），请尝试：eq选择器：

$(function(){
 $('body').animate({
    scrollTop: $(":header:eq(2)").offset().top
}, 500);
});

这是一个小提琴：http://jsfiddle.net/sifriday/xdaf7o3b/5/

为了确保文档中有足够的空间来正确地将视口滚动到所需的标题，您可以进行一些测量，并根据需要向包含的div添加填充：

var wh = $(window).height();
var dh = $(document).height();
var top = $(":header:eq(2)").offset().top
if ((dh - top) < wh) {
    $("#someDiv").css("padding-bottom", (wh - (dh - top)) + "px")
}

演示：http://jsfiddle.net/sifriday/xdaf7o3b/6/

对此的一个很好的测试是在页面的第4个标题处尝试，在此处演示：http://jsfiddle.net/sifriday/xdaf7o3b/7/

Answer 2

替换：header3使用h3

$(function(){
    $('body').animate({
        scrollTop: $("h3").offset().top
    }, 500);
});

更新了JsFiddle

Answer 3

使用html正文选择器

$(function(){
 $('html, body').animate({
     scrollTop: $("h3").offset().top
   }, 800);
});

此处正在运作fiddle

Answer 4

使用以下代码

$(function(){
 $('body').animate({
     scrollTop: $("h3").offset().top
}, 800);
});

Answer 5

AFAIK没有:header3这样的选择器。您可以改用:header:eq(2)。或者只是h3。

$(function(){
 $('body,html').animate({
     scrollTop: $(":header:eq(2)").offset().top
}, 800);
});

Demo

ScrollTop不起作用

5 个答案: