[html] How to navigate to a section of a page

I have a landing page with links. How can I direct user to a section of a different page?

Main Page:

<a href="/sample">Sushi</a>
<a href="/sample">BBQ</a>

Sample Page:

<div id='sushi'></div>
<div id='bbq'></div>

Clicking on "Sushi" or "BBQ" in the Main Page should navigate the user to the div with id sushi or bbq (respectively) of the page sample.

Is it possible without JQuery? I do not mind using JQuery but a simpler solution using html would work too.

Use anchors.

Main Page:

<a href="/sample#sushi">Sushi</a>
<a href="/sample#bBQ">BBQ</a>

Sample Page:

<div id='sushi'><a name="sushi"></a></div>
<div id='bbq'><a name="bbq"></a></div>

Main page

<a href="/sample.htm#page1">page1</a>
<a href="/sample.htm#page2">page2</a>

sample pages

<div id='page1'><a name="page1"></a></div>
<div id='page2'><a name="page2"></a></div>

Use an call thru section, it works

<div id="content">
     <section id="home">
               ...
     </section>

Call the above the thru

 <a href="#home">page1</a>

Scrolling needs jquery paste this.. on above to ending body closing tag..

<script>
  $(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;
              }
          }
      });
  });
</script>

Use hypertext reference and the ID tag,

Target Text Title

Some paragraph text

<h1><a href="#target">Target Text Title</a></h1>
<p id="target">Target Text</p>

My Solutions:

$("body").scrollspy({ target: ".target", offset: fix_header_height });

$(".target").click(function() {
 $("body").animate(
  {
   scrollTop: $($(this).attr("href")).offset().top - fix_header_height
  },
  500
 );
 return;
});

Wrap your div with

<a name="sushi">
  <div id="sushi">
  </div>
</a>

and link to it by

<a href="#sushi">Sushi</a>