Anchor tags functional but smooth scrolling won't work; page acts like javascript isn't there

StackOverflow https://stackoverflow.com/questions/20450832

Question

I'm writing a single-page website in HTML. I want to use javascript for smooth scrolling between anchor tags. I've looked at half a dozen demos online, and copy/pasted relevant code directly into my files, but no matter what I try, the anchor tags work but the smooth scrolling does not.

My problem seems similar to when people try using names instead of IDs. But I am using IDs. I also just validated my HTML at W3schools to rule out basic errors. I have no idea what else to look for, as my javascript is a direct copy/paste, and I've tried it from several different tutorials.

Here's my HTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en-US"
    lang="en-US">

<head profile="http://www.w3.org/2005/10/profile">
    <title>Page Title</title>
    <meta name="keywords"
      content="" />
    <meta name="description"
      content="" />
    <meta name="author" content="" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" 
        href="external_styles.css" />
    <link rel="icon" 
        type="image/png" 
        href="/images/favicon.png" />
    <script src="external_scripts.js" type="text/javascript"></script>
</head>

<body>

<div class="floatingbar">
<table class="navigation" cellspacing="0px" cellpadding="0px">
<tr>
  <th class="logo"><a href="#headshots" class="scroll">Name</a></th>
  <th><a href="#biography" class="scroll">Biography</a></th>
  <th><a href="#reel" class="scroll">Reel</a></th>
  <th><a href="#resume" class="scroll">Resume</a></th>
  <th><a href="#contact" class="scroll">Contact</a></th>
</tr>
</table>
</div>

<div class="carousel" id="headshots">
&nbsp;
</div>

<div class="content">

<h1 id="biography">Biography</h1>
<table cellspacing="0px">
<tr>
<td class="left">
   <p>Nulla auctor risus nec justo dapibus consequat. Praesent sed risus in sem varius pulvinar. Suspendisse a urna adipiscing, suscipit elit quis, dignissim tortor. Vivamus quis nunc eu erat fermentum blandit. Fusce dictum sed turpis nec pulvinar.</p>
</td>
<td class="right">
   <p>Etiam eu felis in arcu lobortis suscipit vel vel dolor. Nullam blandit dolor lorem, id aliquet arcu tincidunt vitae. Mauris id elementum nibh, nec lacinia sapien. Aliquam at orci sem. Morbi faucibus condimentum eleifend.</p>
</td>
</tr>
</table>

<h1 id="reel">Reel</h1>
<div class="center">
   <p>Nulla auctor risus nec justo dapibus consequat. Praesent sed risus in sem varius pulvinar. Suspendisse a urna adipiscing, suscipit elit quis, dignissim tortor. Vivamus quis nunc eu erat fermentum blandit. Fusce dictum sed turpis nec pulvinar.</p>
   <p>Etiam eu felis in arcu lobortis suscipit vel vel dolor. Nullam blandit dolor lorem, id aliquet arcu tincidunt vitae. Mauris id elementum nibh, nec lacinia sapien. Aliquam at orci sem. Morbi faucibus condimentum eleifend.</p>
</div>

<h1 id="resume">Resume</h1>
<div class="center">
   <p>Nulla auctor risus nec justo dapibus consequat. Praesent sed risus in sem varius pulvinar. Suspendisse a urna adipiscing, suscipit elit quis, dignissim tortor. Vivamus quis nunc eu erat fermentum blandit. Fusce dictum sed turpis nec pulvinar.</p>
</div>

<h1 id="contact">Contact</h1>
<div class="center">
<div class="contactform">
<form action="contact.php" method="post">
    <label for="name">Your name.</label>
    <input type="text" id="name" name="user_name" />
    <label for="mail">Your email.</label>
    <input type="email" id="mail" name="user_email" />
    <label for="msg">Your message.</label>
    <textarea id="msg" name="user_message"></textarea>
    <button type="submit">Send it.</button>
</form>
</div>
</div>

</div>

</body>
</html>

And, here's my javascript:

$(".scroll").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
         //go to destination
         $('html,body').animate({scrollTop:dest}, 7000,'swing');
     });

Any ideas?

Was it helpful?

Solution

AS TJ Nicolaides said, Your code is fine Just replace 

<script src="external_scripts.js" type="text/javascript"></script>

with 

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>

OTHER TIPS

You appear to be attempting to use jQuery in your external_scripts.js file without actually having the jQuery library loaded on your page.

You can add it quickly by grabbing a CDN link here: https://developers.google.com/speed/libraries/devguide#jquery

Like what TJ Nicolaides said, you need to reference JQuery but that is not all. You also need to place the reference to the external_scripts file after the HTML before closing the body tag.

Or you can add the script in a document.ready function like so:

$(document).ready(function(){
    $('.scroll').click(function(event){
          //Your code.
});

});

This should work.

Download and include jQuery Library or use CDN version

<script src"http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

Then put this script just before the </body tag

<script>
$(function(){
  $('.scroll').on('click',function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' }, 1000, 'swing');
  });
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top