Site navigation works in Firefox but not in Chrome

<!DOCTYPE html>

    <head>
    
<a name="top"></a>    
    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="Vanoosten Wedding">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />

        <title></title>
      

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main-1.6.css">
         <link rel="stylesheet" href="responsiveslides.css">
   
        <script src="js/main-1.6.js"></script>   
 
        <script src="js/responsiveslides.min.js"></script>
        
        
    </head>
    <body>


        <div id="bg-image">
            <img src="img/bc.jpg" alt="bg" />
        </div>

        <div id="bg-container">

            <div class="header-container">
                <div id="heading" class="wrapper clearfix">
                    <nav id="nav">
                        <ul>
                  
                            <li><a href="#ceremony">CEREMONY</a></li>
                            <li><a href="#after">AFTER</a></li>
                            <li><a href="#reception">RECEPTION</a></li>
                            <li><a href="#special">SPECIAL PEOPLE</a></li>
        
                        </ul>

                    </nav>
                </div>
            </div>

            <div class="main-container">
                <div class="main wrapper clearfix">

                    <header>
                        <div id="introtext">
                            <span class="head-"></span>
                            <span class="head-club">
                                <span class="amp"></span> 
                                
                            </span>
                 </div>

                       
                    </header>
         <body>

                    <div class="clearfix"></div>

                    <section id="ceremony" class="clearfix">
                                
                        <div class="column full">
                        
               
      <script>
    // You can also use "$(window).load(function() {"
    $(function () {

      // Slideshow 1
      $("#slider1").responsiveSlides({
        maxwidth: 1800,
        speed: 800
          });
    });
  </script>                             



    <!-- Slideshow 1 -->
    <ul class="rslides" id="slider1">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
    </ul>
      

               	
                        </div><!--end column-->
						</section>
     

                    <section id="after" class="clearfix">


                        <div class="column full">


    <script>
    // You can also use "$(window).load(function() {"
    $(function () {

      // Slideshow 2
      $("#slider2").responsiveSlides({
        maxwidth: 1800,
        speed: 800
          });
    });
  </script>                             



    <!-- Slideshow 2 -->
    <ul class="rslides" id="slider2">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
    </ul>





                        </div><!--end column--> 

             
                    </section>

                    <section id="reception" class="clearfix">

	    
                        <div class="column full">


   <script>
    // You can also use "$(window).load(function() {"
    $(function () {

      // Slideshow 3
      $("#slider3").responsiveSlides({
        maxwidth: 1800,
        speed: 800
          });
    });
  </script>                             



    <!-- Slideshow 3 -->
    <ul class="rslides" id="slider3">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
    </ul>


                      
                        </div><!--end column-->
</section>

                 <section id="special" class="clearfix">

                        <div class="column full">
                      
   <script>
    // You can also use "$(window).load(function() {"
    $(function () {

      // Slideshow 4
      $("#slider4").responsiveSlides({
        maxwidth: 1800,
        speed: 800
          });
    });
  </script>                             



    <!-- Slideshow 4 -->
    <ul class="rslides" id="slider4">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
    </ul>



<a href='#top'><h3>Back to Top</h3></a>


                            
                        </div><!--end column-->
               
                    </section>

                    <div style="height: 400px"></div>

                </div> <!-- #main -->
            </div> <!-- #main-container -->
        </div> <!-- #bg-container -->


    </body>
    
</html>

Well, I cant blame Chrome for it, and am actually impressed by Firefox, for you use multiple body elements whilst there can only be one in a webpage :wink: .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="Vanoosten Wedding">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Vanoosten Wedding</title>
  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/main-1.6.css">
  <link rel="stylesheet" href="responsiveslides.css">
  <script src="js/main-1.6.js"></script>
  <script src="js/responsiveslides.min.js"></script>
</head>
<body>
  <a id="top"></a>
  <div id="bg-image">
    <img src="img/bc.jpg" alt="bg" />
  </div>
  <div id="bg-container">
    <div class="header-container">
      <div id="heading" class="wrapper clearfix">
        <nav id="nav">
          <ul>
            <li><a href="#ceremony">CEREMONY</a></li>
            <li><a href="#after">AFTER</a></li>
            <li><a href="#reception">RECEPTION</a></li>
            <li><a href="#special">SPECIAL PEOPLE</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="main-container">
      <div class="main wrapper clearfix">
        <header>
          <div id="introtext">
            <span class="head-"></span>
            <span class="head-club"></span>
            <span class="amp"></span>
          </div>
        </header>
      <div class="clearfix"></div>
        <section id="ceremony" class="clearfix">
          <div class="column full">
            <script>
              // You can also use "$(window).load(function() {"
              $(function () {

                // Slideshow 1
                $("#slider1").responsiveSlides({
                  maxwidth: 1800,
                  speed: 800
                });
              });
            </script>

            <!-- Slideshow 1 -->
            <ul class="rslides" id="slider1">
              <li><img src="img/1.jpg" alt=""></li>
              <li><img src="img/2.jpg" alt=""></li>
              <li><img src="img/3.jpg" alt=""></li>
            </ul>
          </div><!--end column-->
				</section>

        <section id="after" class="clearfix">
          <div class="column full">
            <script>
              // You can also use "$(window).load(function() {"
              $(function () {

                // Slideshow 2
                $("#slider2").responsiveSlides({
                  maxwidth: 1800,
                  speed: 800
                });
              });
            </script>
            <!-- Slideshow 2 -->
            <ul class="rslides" id="slider2">
              <li><img src="img/1.jpg" alt=""></li>
              <li><img src="img/2.jpg" alt=""></li>
              <li><img src="img/3.jpg" alt=""></li>
            </ul>
          </div><!--end column-->
        </section>

        <section id="reception" class="clearfix">
          <div class="column full">
            <script>
              // You can also use "$(window).load(function() {"
              $(function () {

                // Slideshow 3
                $("#slider3").responsiveSlides({
                  maxwidth: 1800,
                  speed: 800
                    });
              });
            </script>
            <!-- Slideshow 3 -->
            <ul class="rslides" id="slider3">
              <li><img src="img/1.jpg" alt=""></li>
              <li><img src="img/2.jpg" alt=""></li>
              <li><img src="img/3.jpg" alt=""></li>
            </ul>
          </div><!--end column-->
        </section>
        <section id="special" class="clearfix">
          <div class="column full">
            <script>
                // You can also use "$(window).load(function() {"
                $(function () {

                  // Slideshow 4
                  $("#slider4").responsiveSlides({
                    maxwidth: 1800,
                    speed: 800
                      });
                });
            </script>
            <!-- Slideshow 4 -->
            <ul class="rslides" id="slider4">
              <li><img src="img/1.jpg" alt=""></li>
              <li><img src="img/2.jpg" alt=""></li>
              <li><img src="img/3.jpg" alt=""></li>
            </ul>

            <a href='#top'><h3>Back to Top</h3></a>
          </div><!--end column-->
        </section>
        <div style="height: 400px"></div>
      </div> <!-- #main -->
    </div> <!-- #main-container -->
  </div> <!-- #bg-container -->
</body>
</html>