Smooth scrolling issue -- Javascript kills link functionality

Smooth scrolling issue -- Javascript kills link functionality
0

#1

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

});

#2

All I changed to get this to work was change the version of jQuery loaded in the script

<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>

to

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Also it seems like you’re loading in scripts you don’t need. For example, localScroll

 <script sric="https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.4.0/jquery.localScroll.min.js"></script>

It isn’t even being loaded as src is spelled sric so consider getting rid of it. :smiley:

The nav element should really be in the body tag and usually CSS files are in the <head> and JS scripts are usually just before the closing </body> tag. Good luck!


#3

You’re amazing. Thank you!

I’ll work on it once I’m, well, off of work.