在加载时自动滚动以显示所有页面

时间:2013-09-04 05:12:33

标签: javascript html

我在这里有一个jsfiddle - http://jsfiddle.net/stevea/z3YvT/ - 带有一个绝对定位的橙色框:

div#box2 {
    width:150px;
    height: 150px;
    background-color:orange;
    border:1px solid black;
    position:absolute;
    top:-50px;
    right:400px;
}

目前该框偏离页面顶部50px,因此我们只看到150px框的底部100px。我希望页面加载,以便它自动滚动显示所有框。这可能吗?

由于

1 个答案:

答案 0 :(得分:2)

您考虑过animate了吗?

Fiddle


您无法真正滚动页面,但可以滚动页面中的对象;或者你想要滚动body

$('body').css('position','relative').animate({top:'50px'})

Fiddle


使用新条件,您可能希望扫描所有元素的偏移量并进行相应调整:

var min = { top: 0, $el: {} };

// Scan all Elements
$('body *').each(function () {
    var $this = $(this),
        _top = $this.offset().top;

    if (_top < min.top) {
        min.top = _top;
        min.$el = $this;
    }
});

// Adjust Accordingly
$('body').css('position', 'relative').animate({
    top: (min.top * -1) + 'px'
})

Fiddle