To create a targeted menu, assign specific ids to the elements you want to link to and ensure these ids match the hash fragment (e.g., #xyz).
For example:
<a href="#first">First</a>
Clicking the above link will direct the user to this corresponding element:
<div id="first">...</div>
You mentioned "sliding." By default, the page instantly jumps to the target instead of sliding. To achieve sliding, override the default behavior with an animation. Although recommending specific plugins is off-topic for SO, here is a simple jQuery example based on your question:
// Handle clicks on our navigation anchors
$(".nav a").on("click", function(e) {
// Get the href attribute, which will be #first or similar, and get the element using that
// as a CSS selector
var hash = this.getAttribute("href");
var target = $(hash);
// Tell jQuery to animate us to that location. Note that some
browsers animate body, others `html`, so we
do both
$('body, html').animate({
scrollTop: target.position().top
}, 800);
// Prevent the usual jump
e.preventDefault();
// Set the hash *without* causing the jump (for bookmarks and such)
if (history && history.replaceState) {
history.replaceState(null, null, hash);
}
});
.fill {
height: 5em;
}
<ul class="nav">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
<li><a href="#fourth">Fourth</a></li>
</ul>
<div class="fill">
Some content to fill space
</div>
<div id="first" class="fill">This is the first target</div>
<div id="second" class="fill">This is the second target</div>
<div id="third" class="fill">This is the third target</div>
<div id="fourth" class="fill">This is the fourth target</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<div class="fill">More filler</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>