1

I have a web page that is wide (3078px) and pretty long too (1540px). The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself). When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.

I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.

Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on. Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)

HERE IS THE CSS:

body {
    margin:0px;
    padding:0px;
    text-align: center;
    background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
    margin:0px;
    padding:0px;
    float:left;
    display:inline-block;
    width:1024px;
    height:768px;
    background:transparent;
    border:1px red solid;
}
#above {
    margin:0px;
    padding:0px;
    float:left;
    display:inline-block;
    width:3078px;
    height:770px;
    background:transparent;
}
#below {
    margin:0px;
    padding:0px;
    float:left;
    display:inline-block;
    width:3078px;
    height:770px;
    background:transparent;
}
#mainbox {
    margin: 0 auto;
    padding:0px;
    float:left;
    display:inline-block;
    width:3078px;
    height:1540px;
    background:transparent;
}

AND THE HTML:

<div id="mainbox">
    <div id="above">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
    <div id="below">
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
    </div>
</div>

There is a JS fiddle too: http://jsfiddle.net/KyMet/

A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?

4

2 回答 2

1

You need to use some query to pull this of.

EDIT
DEMO

$(function(){
    //total width of your wrapper
    var totalWidth = $('#mainbox').outerWidth(true);

    //width of the user browser
    var width = window.innerWidth;

    //calculate the middle
    var middle = (totalWidth - width) / 2

    window.scrollTo( middle, 0 );
});


YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this

body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #222;
    overflow: scroll;
}

#box1, #box2, #box3, #box4, #box5, #box6 {
    margin: 0;
    padding: 0;
    float: left;
    display: block;
    width: 1024px;
    height: 768px;
    border: 1px red solid;
}

#box2 {
    background-color: aqua; /* only for demo */
}

#above {
    margin: 0px;
    padding: 0px;
    display: block;
} 

#below {
    margin: 0px;
    padding: 0px;
    display: block;
}

#mainbox {
    padding: 0;
    width: 3078px;
    height: 770px;
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}
于 2013-05-05T19:17:52.953 回答
0

You would have to use jQuery scrollto library

http://demos.flesler.com/jquery/scrollTo/

于 2013-05-05T18:51:33.757 回答