JS
[php]
$(‘a[href^="#"]’).click(function(event) {
var id = $(this).attr("href");
var target = $(id).offset().top;
$(‘html, body’).animate({scrollTop:target}, 500);
event.preventDefault();
});
function getTargetTop(elem){
var id = elem.attr("href");
var offset = 50;
return $(id).offset().top – offset;
}
$(window).scroll(function(e){
isSelected($(window).scrollTop())
});
var sections = $(‘a[href^="#"]’);
function isSelected(scrolledTo){
var threshold = 100;
var i;
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
if (scrolledTo > target – threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};
}
[/php]
HTML
[php]
<ul class="flexnav">
<li><a href="#home" onclick="scrollPageToId(‘home’);">Home</a></li>
<li><a href="#what-we-do" onclick="scrollPageToId(‘what-we-do’);">What we do</a></li>
<li><a href="#reviews" onclick="scrollPageToId(‘reviews’);">Reviews</a></li>
</ul>
<section class="home" id="home">
<div class="container">
</div>
</div>
<section class="home" id="what-we-do">
<div class="container">
</div>
</div>
<section class="home" id="reviews">
<div class="container">
</div>
</div>
[/php]
CSS
[php]
ul.flexnav li a.active {
border-bottom: 1px solid #000;
}
[/php]
