I have a landing page with links. How can I direct user to a section of a different pag开发者_如何学编程e?

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 HTML's anchors:

Main Page:

<a href="sample.html#sushi">Sushi</a>
<a href="sample.html#bbq">BBQ</a>

Sample Page:

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

Wrap your div with

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

and link to it by

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

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>

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>

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>

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;
});