I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:). I thought I had rewritten it the same way as before, but apparently not.
Below is the JavaScript code:
$(document).ready(function() {
$(function() {
$(".navlist").on("click", function() {
$(".navlist").removeClass("active");
$(this).addClass("active");
});
});
function goToByScroll(id){
// Remove "link" from the ID
id = $(id).replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top}, 'slow');
}
$(".navbar > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
});
Here is the corresponding HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav" >
<li class="navbar-brand"><img width="100%" height="100%" src="sa.png"></li>
<li class="navlist"><a id ="homelink" href="#">HOME</a></li>
<li class="navlist"><a id = "portfoliolink" href="#">WORK</a></li>
<li class="navlist"><a id = "contactlink" href="#">CONTACT</a></li>
</ul>
</nav>
<section class="jumbotron_index">
<p class= "scrollhome" id ="home"> scroll to home </p>
<div class="content">
<h1> </h1>
<h2>
<a href="" target="_blank"><img width="2%" height="2%" src="gh.png"></a></h2>
<h3> </h3>
<p class= "scrollwork" id="portfolio"> scroll to work </p>
</div>
</section>
<div class="container middle">
//stuff here
</div>
<div class= "container bottom" id = "contact">
//stuff here
</div>
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>