我有这方面的困难，需要你的帮助。
导航栏位于<aside>标记的网页左侧。
我想做的是：
当用户点击其中一个<li>标签时，它会滑动到<section>，我希望它可以滑动到。{/ p>
类似的东西： http://jsfiddle.net/jtbowden/ykbgT/
到目前为止，这是我的代码：
body {
width: 100%;
height: 100%;
padding: 0;
}
a[title] {
color: #b70000;
font-size: 20px;
}
a:link, a:visited {
color: #b70000;
text-decoration: none;
}
a:hover, a:visited:hover {
color: white;
text-decoration: none;
background-color: #b70000 !important;
}
.about-section div h2, .about-section div h5, .about-section div span {
color: red;
}
.box {
position: absolute;
width: 50%;
height: 300px;
left: 50%;
top: 100px;
margin-left: -25%;
}
#slide1 {
background-color: green;
left: -150%;
}
#slide3 {
background-color: green;
left: 150%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Welcome to Shukri</title>
</head>
<!------------------------------------------------------------------->
<body>
<aside class="container-fluid">
<nav class="navbar-nav navbar col-lg-2">
<div class="navbar"><img style="padding-top: 20px;" src="imgs/logo.png" alt="Logo"/></div>
<ul class="nav menu nav-pills nav-stacked">
<li class="nav-item 1"><a href="#slide1" title="HomePage">Home</a></li>
<li class="nav-item 2"><a href="#slide2" title="About Shukri">About Us</a></li>
<li class="nav-item 3"><a href="#slide3" title="Projects">Our Projects</a></li>
<li class="nav-item 4"><a href="#slide4" title="Employees">Our Employees</a></li>
<li class="nav-item 5"><a href="#slide5" title="Contqct Information">Contact Us</a></li>
</ul>
</nav>
</aside>
<div class="container">
<section class="home-section box" id="slide1">
<div>
STUFF
</div>
</section>
</div>
<div class="container">
<section class="about-section box" id="slide2">
<div>
<h2>About US</h2>
<h5>INTRODUCTION</h5>
<p><span>Great architecture</span> is not made but evolves from a mysterious alchemy of mind, efforts and technology. That’s what makes architecture alluring. The current education, infrastructures, transportation and industrialization activities around the kingdom has given architects, engineers, planners and entrepreneurs tremendous opportunities to build to suit the required paradigm favorable for building design, its management, its energy issues and operations.</p>
<p><span>MHS Architectural Office</span> has similar vision, not only demystify technology modeling in general but also to provide tips, training and information system that will help clients/companies, other architects and engineers to achieve efficient design and aid in energy modeling, the assumptions, coordination process, including the tools and what the output means to potential design decisions. Therefore the need to identify best practices and deliver quality tools to perform in-depth performance analysis has never been greater. Reliable and consistent full-building system, energy and operational analysis are necessary to achieve increasingly aggressive performance targets in the building design and construction sectors.</p>
<p><span>MHS Architectural Office</span> is primarily a science based team, as opposed to data-based team. It is comprised of experienced professionals in the fields of architecture, urban design, engineering, planning, IT and Information management.</p>
<p><span>MHS Architectural Office</span> profusely adopts the latest BIM tools like the Autodesk Revit in Architecture, MEP and Structure. Being an Autodesk “Authorized Training Center” and “Authorized Accrediting Center” and networking with industry peers to simplify the design process to achieve better results in terms of efficiency, economy of time, money, efforts, and coordination which minimize the likelihood of common mishaps which otherwise is so prevalent in the conventional practices.</p>
<p><span>As architects</span>, we have to be fearless to visualize the tomorrow, because it will be the tomorrow that decides the worthiness of what we do today. So how do we build the kind of flexibility needed into our thought process, building system, material selection, so that it bends to the future’s need?</p>
</div>
</section>
</div>
<footer class="footer" id="footer">
<p class="text-center navbar-fixed-bottom" style="bottom: 20px; color: #b70000">Copyright © Mohammed H Shukri Architectural Office. All rights reserved</p>
</footer>
<!--- style.css --->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--- Bootstrap.css --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<!--- Responsive.css --->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<!--- Bootstrap JS --->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--- JQuery --->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>