If I have a section of HTML that is common across several html files, can I have it in its own .html file?

Question

The title might have been a bit confusing, sorry about that. Let me clarify.

So in my website, I have a <nav> section which is present on every .html page for the site. If I want to make a change to the nav menu, I have to change it on every single page.

Is there a way that I can have that <nav> section in its own .html file (eg nav.html) and then have it produced on every site .html page? That way, if I need to make a change then it only needs to be made in a single file (ie nav.html) and will still update on all pages when it's run.

If I can do that somehow, how can I make it so that it will scroll to the top of the page if the nav button of the current page is pressed?

So if I'm on photos.html and I click the "Photos" link on the nav bar (which would usually take me to photos.html), can I make it not refresh the page but instead just go to top, for example? (ie <a href="#">Photos</a> )

Answer 1

Is there a way that I can have that section in its own .html file (eg nav.html) and then have it produced on every site .html page?

You can use .load() or $.get() with .append() or .prepend() .

$(function() {
  $.get("nav.html")
  .then(function(html) {
    $("body").prepend(html);
    $("a[href='#']:contains(Photos)").on("click", function(e) {
      e.preventDefault();
      $("html, body").animate({
        scrollTop:0
      }, 1000);
    });
  });
});

Answer 2

In order to have the Navbar in only one file jquery's .load or .get functions would be the easiest solution as stated in guest271314 answer. Although I would do something more like this to load the content:

$(document).ready(function() {
    $('#nav-container').load('nav.html');
});

I realize this would mean you would need <div id="nav-container"></div> on each page but this seems like a cleaner solution to me.

For the page jump you can simply use an id in your href like so. This will make it so the page will scroll to the top of the div with the id you enter into the href .

<div id="pictures"></div>
<a href="#pictures">Pictures</a>

You can also add some jQuery to make the page jump smooth. The script below was taken from this CSS-Tricks article and will make that page jump smooth.

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 3

I would create an include file called something like navMenu.php that just has your nav menu code in it.

<nav> menu code here </nav>

Then each of your pages that you want to include this code rename with the extension .php
Then wherever in these other pages you want to include this nav menu code write

<?php require 'navMenu.php' ?>

Refer to: http://php.net/manual/en/function.require.php