web-dev-qa-db-fra.com

Comment naviguer dans une section d'une page

J'ai une page d'arrivée avec des liens .. Comment puis-je diriger l'utilisateur vers une section d'une autre page?

Page d'accueil:

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

Page d'exemple:

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

En cliquant sur "Sushi" ou "BBQ" dans la page principale, l'utilisateur doit accéder à la division avec id sushi ou bbq (respectivement) de la page sample.

Est-ce possible sans JQuery? Cela ne me dérange pas d'utiliser JQuery, mais une solution plus simple utilisant HTML pourrait également fonctionner.

htmlhyperlink
20
truthSeekr

Utilisez les ancres de HTML:

Page d'accueil:

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

Page d'exemple:

<div id='sushi'><a name='sushi'></a></div>
<div id='bbq'><a name='bbq'></a></div>
50
Lightness Races in Orbit

Enveloppez votre div avec 

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

et le lien par 

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

Utilisez des ancres.

Page d'accueil:

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

Page d'exemple:

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

Utilisez un appel via la section, cela fonctionne

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

Appelez le ci-dessus à travers 

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

Le défilement a besoin de jquery coller this .. ci-dessus pour terminer le tag de fermeture du corps ..

<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>
3
Manikandan D

Page d'accueil

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

exemples de pages

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

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

0
Shifeng Liu

Utiliser une référence hypertexte et la balise ID, 

Titre du texte cible

Du texte de paragraphe

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