javascript - 如何创建将屏幕移动到差异的功能。全屏div？

Question

网站基本上是这样的

-------------------------------------------- ------ | 0 |客户 | 0 | -------------------------------------------- ---- |服务 | 0 |关于 | -------------------------------------------- ---- | 0 |主页 | 0 | -------------------------------------------- ---- |价格 | 0 |投资组合 | -------------------------------------------- ---- | 0 |联系 | 0 | ------------------------------------------ ------------------------

每个分区占据整个屏幕，0 是纯白色未使用的分区。 首先，我需要修复没有滚动条的屏幕。 我该怎么做

-在网站加载(onload)时将屏幕带到“主页”的功能？

-单击相应导航选项(将固定在顶部)时将屏幕(设置转换)带到特定分区的功能？

关于 CSS，我不知道什么(body 或 wrapper)必须设置为 300%x500%(整个页面)以及如何实现该功能。 全部使用 html、css 和纯 javascript。

我知道需要通过更改边距来移动焦点屏幕，但我没有这样做。我开始了一点，但显然完全卡住了。请帮忙。

Answer 1

一些提示:

CSS:

body { width:300%; height:500%; overflow:hidden; }

JS:

var x = document.getElementsByTagName('body')[0];
//set "home" in the center of page
window.onload = function () {
    x.style.marginLeft = "homeXposition";
    x.style.marginTop = "homeYposition";
}
// function for "take me to some section"
// wh defines element
function goSomewhere(wh) {
    switch(wh){
case about:
    x.style.marginLeft = "aboutXposition";
    x.style.marginTop = "aboutYposition";
    break;
case medjed:
    x.style.marginLeft = "medjedXposition";
    x.style.marginTop = "medjedYposition";
    break;
.......................
default:
    ...........
    }
}

编辑: 如果您的所有部分都有屏幕大小，这适合您。

var mrdalo = document.getElementsByTagName('body')[0];<p></p>

<p>function moveYourBody (myb) {
    switch myb {
        case cl: //Clients
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "0";
            break;
        case se: //Services
            mrdalo.style.marginLeft = "0";
            mrdalo.style.marginTop = "100%";
            break;
        case ab: //About
            mrdalo.style.marginLeft = "200%";
            mrdalo.style.marginTop = "100%";
            break;
        case pr: //Price
            mrdalo.style.marginLeft = "0";
            mrdalo.style.marginTop = "300%";
            break;
        case po: //Portfolio
            mrdalo.style.marginLeft = "200%";
            mrdalo.style.marginTop = "300%";
            break;
        case co: //Contacts
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "400%";
            break;
        default: //Home
            mrdalo.style.marginLeft = "100%";
            mrdalo.style.marginTop = "200%";
            break;
    }
}
</p>