2012-08-05 13 views
6

Nella parte inferiore della mia home page ho incluso un modulo di contatto e specificato l'ancoraggio per questa sezione come div id = "contatto".Collegamento a pagina diversa -> jquery scorrere a ancoraggio specifico

Quando si fa clic sul pulsante di contatto su qualsiasi pagina, è necessario spostarsi sulla pagina iniziale e, al caricamento della pagina, scorrere automaticamente fino al modulo di contatto.

Non sono riuscito a farlo funzionare dopo aver esaminato una domanda simile che ho trovato qui: jQuery scroll to ID from different page Quando provo, salta semplicemente al modulo. Voglio che scorra senza problemi.

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li> 

La funzione problema jQuery per passare al contatto di ancoraggio sulla home page da altre pagine:

(function($){ 
    var jump=function(e) { 
     if (e) { 
      e.preventDefault(); 
      var target = $(this).attr("href"); 
     } else { 
      var target = location.hash; 
     } 

     $('html,body').animate({ 
      scrollTop: $(target).offset().top 
     },1000,function() { 
      location.hash = target; 
     }); 
    } 

    $('html, body').hide() 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

    if (location.hash) { 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show() 
      jump() 
     }, 0); 
    } else { 
     $('html, body').show() 
    } 
}); 

che sto cercando di realizzare qualcosa di simile a questo esempio: http://vostrel.cz/so/9652944/page.html differenza è che invece di l '"id di ancoraggio" in questo caso appare su entrambe le pagine, l'id di ancoraggio (contatto) per me appare solo su una pagina (home).

risposta

0

Non sono sicuro di quale sia il codice, ma sono riuscito a farlo funzionare. Una cosa è, il codice che hai postato, manca uno })(jQuery) alla fine. Comunque, guarda cosa ho fatto here, penso che sia quello che stai cercando. Non sono sicuro di come sia l'HTML del tuo sito Web, ma penso che tu possa adattarlo. Tutto quello che devi fare è impostare l'attributo href del pulsante di contatto su index.html#contact. Su index.html, puoi semplicemente usare #contact e farà la stessa cosa.

In index.html, intestazione:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="#contact">Contact</a> 
</div> 

ma in qualsiasi altra pagina:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="index.html#contact">Contact</a> 
</div> 

rimozione index.html nell'intestazione in index.html impedisce pagina da essere caricato due volte, in modo che jQuery scorre semplicemente la pagina verso il basso.

0

Piccolo suggerimento mi sono imbattuto mentre testare il tuo codice:

Perché si sta utilizzando l'attributo href del tag di ancoraggio, viene assunto come #contact, che jQuery interpreta come un ID.

È necessario aggiungere un id = "contatto" all'ancora affinché funzioni, indipendentemente dalla pagina attiva.

1

Prova questo, lo script è OK solo l'ultima riga manca

(function ($) { 

    var jump = function (e) { 
     if (e) { 

      e.preventDefault(); 
      var target = $(this).attr("href"); 

     } else { 

      var target = location.hash; 

     } 
     $('html,body').animate({ 

      scrollTop: $(target).offset().top 

     }, 1000, function() { 

      location.hash = target; 

     }); 
    } 

    $('html, body').hide(); 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

     if (location.hash) { 
      setTimeout(function() { 

       $('html, body').scrollTop(0).show() 
       jump(); 

      }, 0); 
     } else { 

      $('html, body').show(); 

     } 
    }); 
})(jQuery) 
Problemi correlati