Hello again,
I’m having difficulty integrating smooth scrolling into my Navbar for my Personal Portfolio.
I’ve figured out how to integrate Scrollspy and how to make my Navbar links jump around to various parts of my page–those things aren’t issues, I don’t think–but when I try to make use of Javascript or JQuery calls in order to integrate smooth, animated scrolling into my links, my links stop working altogether.
I haven’t taken the Javascript courses yet, so maybe I’m missing some crucial information that would otherwise be helpful… but if anyone wants to take a look at what I’ve got, I’d be more than happy to oblige!
My Codepen project is located here, and for your convenience, I’ve copied and pasted the code from the HTML and JS sections directly into this post.
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script sric="https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.4.0/jquery.localScroll.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<nav class="navbar fixed-top navbar-inverse navbar-toggleable-md" id="myNavbar">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#page-top">Spencer Merrell</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#page-portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#page-contact">Contact</a>
</li>
</ul>
</div>
</nav>
<body data-spy="scroll">
<!-- All elements at the top of the page -->
<div class="container-fluid" id="page-top">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- All elements in the middle of the page -->
<div class="container-fluid" id="page-about">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- All elements at the bottom of the page -->
<div class="container-fluid" id="page-portfolio">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
<div class="container-fluid" id="page-contact">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</body>
And JS:
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
