使用skrollr和skrollr菜单，1）如何让我的网站平滑滚动到我的主题标签？ 2）如何让我的网站只能水平滚动？

Question

这是我无法上班的小提琴：http://jsfiddle.net/geoyws/ULJ27/

<div class="fixed-nav-container"> <a id="logo-a" href="#home"><img id="logo" src="files/images/enliten-logo.png"></a>

    <ul class="nav-menu">
        <li><a href="#home">Home</a>
        </li>
        <li><a href="#about-us">About Us</a>
        </li>
        <li><a href="#curriculum">Curriculum</a>
        </li>
        <li><a href="#gallery">Gallery</a>
        </li>
        <li><a href="#accommodation">Accommodation</a>
        </li>
        <li><a href="#testimonials">Testimonials</a>
        </li>
        <li><a href="#contact-us">Contact Us</a>
        </li>
        <li><a href="#forums">Forums</a>
        </li>
    </ul>
    <!-- End of .fixed-nav-container -->
</div>
<!-- Beginning of .main-container, to hold the entire site -->
<!-- Also contains the Skrollr functionality to make the site scroll horizontally -->
<div id="home" class="main-container" data-0="left:0px;" data-250="left:-500px;" data-500="left:-1000px;" data-750="left:-1500px;" data-1000="left:-2000px;" data-2000="left:-4000px;" data-3000="left:-6000px;">
    <!-- Beginning of the vertical offset function of Skrollr -->
    <div data-smooth-scrolling="on" data-0="top:0px;" data-250="top:250px;" data-500="top:500px;" data-750="top:750px;" data-1000="top:1000px;" data-2000="top:2000px;" data-3000="top:3000px;">
        <!-- Beginning of .main-content, where we will display the major contents of the site -->
        <div class="main-content">
            <div class="main-content-pages" id="about-us">About Us</div>
            <div class="main-content-pages" id="curriculum">Curriculum</div>
            <div class="main-content-pages" id="gallery">Gallery</div>
            <div class="main-content-pages" id="accommodation">Accommodation</div>
            <div class="main-content-pages" id="testimonials">Testimonials</div>
            <div class="main-content-pages" id="contact-us">Contact Us</div>
            <div class="clear-both"></div>
        </div>
    </div>
</div>

/* Code by @geoyws */
 body {
    height:100vh;
}
.main-container {
    position:absolute;
    top:0px;
    left:0px;
}
.fixed-nav-container {
    position:fixed;
    padding:10px 0px 50px 0px;
    height:100vh;
    width:280px;
    margin:-15px 0px 0px -15px;
    background:rgba(255, 255, 255, 0.99);
    box-shadow:-5px 5px 15px 5px gray;
    text-align:right;
    font-weight:normal;
    font-family:Helvetica, Arial, sans-serif;
    z-index:999999;
}
#logo {
    width:180px;
    padding:10vh 40px 10vh 10px;
}
ul.nav-menu {
    list-style-type:none;
    margin:0px auto 0 auto;
    padding:0 40px 0 0px;
    text-transform:uppercase;
}
ul.nav-menu>li {
    padding:5px 5px 5px 0;
    color:#551F7A;
}
ul.nav-menu>li>a {
    margin: 0 0 0px 0;
    width:inherit;
    text-decoration:none;
    color:inherit;
}
ul.nav-menu>li:hover {
    color:white;
    background: rgba(85, 31, 122, 1.00);
}
ul.nav-menu>li:active {
    color:white;
    background: rgba(85, 31, 122, 1.00);
}
.main-content {
    margin: 50px 20px 30px 320px;
    width:10000px;
}
.clear-both {
    clear:both;
}
.main-content-pages {
    float:left;
    margin-right:20px;
    height:80vh;
    max-width:800px;
    min-width:400px;
    overflow-y:scroll;
}
#page-container {
    width:auto;
    height:auto;
    min-height:80vh;
    background: rgba(255, 255, 255, .99);
    border-radius:0px;
    padding: 30px;
}

1）如何让我的网站顺利滚动到我的主题标签？它目前正在那里飞行。我使用Skrollr菜单的方式有问题吗？

2）如何让我的网站只能水平滚动？我想要得到这个效果：http://jsfiddle.net/GpPHx/119/

谢谢你们。