Looking for some assistance with implementing a 'scroll to section navigation' on my single page website. I tried using this jsfiddle as a starting point, which worked perfectly. However, when I transferred the code to my website, it doesn't seem to function properly. Here are the key code snippets from my implementation:
<!-- SECTION DEFINITION -->
<section id="about" data-anchor="about">
<div id="about-wrap">
<h1>I'm a really cool title about<br>Small Space Living</h1>
<p>Lorem ipsum dolor sit amet, consectetur ...esse.</p>
<a class="link" href=""><span>Learn More</span></a>
</div>
</section>
<!-- NAVIGATION MENU -->
<div class="navbar pull-right">
<ul class="navi">
<li><a href="#" data-scroll="about">About Us<hr></a></li>
<li><a href="#" data-scroll="solutions">Solutions<hr></a></li>
<li><a href="#" data-scroll="contact">Contact Us<hr></a></li>
</ul>
</div>
<!-- JQUERY FUNCTIONALITY -->
<script>
$(document).ready(function(){
$(function(){
$('navi a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="'+scrollAnchor+'"]').offset().top -10;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
});
$(window).scroll(function() {
if ($(window).scrollTop() >= 100) {
$('nav').addClass('fixed');
} else {
$('navi').removeClass('fixed');
}
});
});//]]>
});
</script>
I have checked the CSS and don't see any style-related issues, especially since the jsfiddle version works without any styling. Any suggestions or help would be greatly appreciated. Thank you!