Take a look at this interesting fiddle!
I am interested in creating links that scroll to different sections of content areas on my site, similar to the footer links in the example. I have been suggested to use Anglers routing system, but I am not familiar with how API history or other methods actually work and how to implement them. Two other solutions I found are mentioned below:
Solution1? Solution2?
HTML
<div class="content-slide-menu" data-menu="1">
<ul class="menu">
<li id="link1"> <a href="#null" data-page="1">blah blah</a>
</li>
<li id="link2"> <a href="#null" data-page="2">twit twoo</a>
</li>
</ul>
</div>
<div class="content-slide">
<div id="page1" class="content">
<h3>blah blah</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
<div class="dots"><span>...</span>
</div>
</div>
<div id="page2" class="content">
<h3>twit twoo</h3>
<p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
<div class="dots"><span>...</span>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="content-slide-menu" data-menu="2">
CSS
.content-slide-menu {
float: left;
width: 220px;
padding: 0 10px;
}
.content-slide-menu li {
list-style-type: none;
}
.content-slide-menu a {
text-decoration: none;
color: #2b2b2b;
font-size: 135%;
}
.content-slide-menu a:hover {
color: #3ca3c5;
}
.content-slide {
float: left;
width: 440px;
margin-top: 65px;
}
.content-slide .content {
display: none;
}
.content-slide .content h3 {
font-size: 150%;
font-weight: bold;
}
.content-slide .content p {
margin: 5px 0;
font-size: 110%;
}
.dots {
font-size: 350%;
font-weight: bold;
}
.active {
color: #3ca3c5!important;
}
#footer {margin-top:800px;}
Script
function showPage(menu, page) {
$slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
$slider.next().children('.content').hide();
$("#page" + page).show();
$slider.find('a.active').removeClass("active");
$("#link" + page).children().addClass('active');
}
function showAndScroll(menu, page) {
showPage(menu, page);
$('html, body').animate({
scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
}, 1000);
}
$(document).ready(function () {
$(".menu a").click(function () {
var $this = $(this),
$slider = $this.closest('.content-slide-menu');
showPage($slider.data("menu"), $this.data("page"));
});
$(".content-slide-menu").each(function(index, that) {
showPage($(that).data('menu'), $(that).find("a").first().data('page'));
});
});