Check out the fiddle!
Im wanting to be able to link to the different sections of the content areas via links similar to the footer links in the example. However I want this functionality (Scroll to/open the section) to work when links are pressed on different pages of the site. Anglers routing system has been suggested but no idea how API history or other methods actually work or how to implement them. Another two solutions I found but cant figure out how to implement are below.
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">
<ul class="menu">
<li id="link3"> <a href="#null" data-page="3">Sit Amet</a>
</li>
<li id="link4"> <a href="#null" data-page="4">lorem ipsum</a>
</li>
</ul>
</div>
<div class="content-slide">
<div id="page3" class="content">
<h3>Sit Amet</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="page4" class="content">
<h3>lorem ipsum</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 id="footer">
<a href="javascript:showAndScroll(1, 2)" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
<br>
<a href="javascript:showAndScroll(2, 4)" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
</div>
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'));
});
});
There is actually no good method to prevent the default hash jump execution especially on page load as each browser has a different behavior on this.
On chrome I tried something like this before and it worked, but not on other browsers:
$(window).load(function() {
$(window).scrollTop(0);
//and do your animate scrolling
});
But there is a good trick for this, you can pass a hash which does not have the exact id on your html but should have at least the page-id.
I think on your script you don't need to pass the menu argument base on your markup structure and what your want to achieve, just a page parameter would do fine.
Script:
function showPage(page) {
//show the target page and hide siblings
$("#page" + page).show().siblings().hide();
$("#link" + page).children().addClass('active').parent()
.siblings().children().removeClass('active');
}
function showAndScroll(page) {
showPage(page);
$('html, body').animate({
scrollTop: $("#link" + page).closest('.content-slide-menu').offset().top
}, 1000);
}
$(document).ready(function () {
$(".menu a").click(function () {
var $this = $(this);
showPage($this.data("page"));
});
$(".content-slide-menu").each(function () {
showPage($(this).find("a").first().data('page'));
});
//on DOM ready get the hash value and extract the page id number
var hash = window.location.hash,
page = hash.replace(/[^0-9]/g, '');
//then execute showAndScroll to this page
showAndScroll(page);
});
On your other pages your link should be like this:
<a href="page.html#page-2" title="Twit Twoo">Twit Twoo</a>