How to navigate to a section of a page

Question

I have a landing page with links  How can I direct user to a section of a different page   Main Page    lt a href   sample  gt Sushi lt  a gt   lt a href   sample  gt BBQ lt  a gt    Sample Page    lt div id  sushi  gt  lt  div gt   lt div id  bbq  gt  lt  div gt    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

User · Accepted Answer

Use HTML s anchors   Main Page    lt a href  sample html sushi  gt Sushi lt  a gt   lt a href  sample html bbq  gt BBQ lt  a gt    Sample Page    lt div id  sushi  gt  lt a name  sushi  gt  lt  a gt  lt  div gt   lt div id  bbq  gt  lt a name  bbq  gt  lt  a gt  lt  div gt

User · Answer

Use hypertext reference and the ID tag    Target Text Title    Some paragraph text    Target Text   lt h1 gt  lt a href   target  gt Target Text Title lt  a gt  lt  h1 gt   lt p id  target  gt Target Text lt  p gt

User · Answer

Wrap your div with     lt a name  sushi  gt     lt div id  sushi  gt     lt  div gt   lt  a gt    and link to it by    lt a href   sushi  gt Sushi lt  a gt

User · Answer

Main page   lt a href   sample htm page1  gt page1 lt  a gt   lt a href   sample htm page2  gt page2 lt  a gt    sample pages   lt div id  page1  gt  lt a name  page1  gt  lt  a gt  lt  div gt   lt div id  page2  gt  lt a name  page2  gt  lt  a gt  lt  div gt

User · Answer

Use anchors   Main Page    lt a href   sample sushi  gt Sushi lt  a gt   lt a href   sample bBQ  gt BBQ lt  a gt    Sample Page    lt div id  sushi  gt  lt a name  sushi  gt  lt  a gt  lt  div gt   lt div id  bbq  gt  lt a name  bbq  gt  lt  a gt  lt  div gt

User · Answer

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

User · Answer

Use an call thru section  it works   lt div id  content  gt        lt section id  home  gt                           lt  section gt    Call the above the thru     lt a href   home  gt page1 lt  a gt    Scrolling needs jquery paste this   on above to ending body closing tag     lt script gt      function              a href     not  href       click function               if  location pathname replace              this pathname replace            amp  amp  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                                               lt  script gt

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

Examples related to html

Examples related to hyperlink