CODEWITHSUNDEEP
htmlhyperlink
truthSeekr
truthSeekr

Reputation: 1633

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.

Upvotes: 45

Views: 249628

Answers (7)

Shifeng Liu
Shifeng Liu

Reputation: 11

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

Upvotes: 1

Otis Zeon
Otis Zeon

Reputation: 51

Use hypertext reference and the ID tag,

Target Text Title

Some paragraph text

Target Text

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

Upvotes: 5

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385385

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>

Upvotes: 82

Manikandan D
Manikandan D

Reputation: 41

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>

Upvotes: 4

wasim sofi
wasim sofi

Reputation: 27

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>

Upvotes: 3

RedSoxFan
RedSoxFan

Reputation: 634

Wrap your div with 

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

and link to it by 

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

Upvotes: 22

Brandon
Brandon

Reputation: 70032

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>

Upvotes: 7

Related Questions