jQuery scrollTop non funziona con il collegamento querystring

Question

ho una navigazione e l'URL iniziale si presenta così:

test.php?query=19

e devo link sulla mia pagina come modo <a href="#section-1">Section 1</a><a href="#section-2">Section 2</a><a href="#section-3">Section 3</a>

con 3 sezioni:

<section id="section-1"></section><section id="section-2"></section><section id="section-3"></section> 

e sto usando questo codice jquery per scorrere fino a quella sezione dalla parte superiore della pagina età) all'inizio di quella sezione e non mostrare il tag # nella mia url.

$(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 
       }, 2000); 
       return false; 
      } 
     } 
    }); 
}); 

il mio problema è che questo non scorre alla sezione. va semplicemente alla sezione in basso della sezione e poi scorre verso l'alto e il # appare nel mio url.

Ho un altro menù sulla mia home page principale:

home.php e sto usando lo stesso codice esatto jquery e funziona su quella pagina.

mia domanda è come faccio ad avere lo scrollTop di lavorare nella mia pagina test.php?query=19 come fa il home.php Quando clicco su un come su test.php?query=19 mie modifiche URL a questo: test.php?query=19#section-1

Answer 1

vorrei cambiare la logica si è gestendo il tuo codice. Prevenire l'evento di default e accedere direttamente a href da attr.

Qualcosa di simile a questo:

$(function() { 
    $('a[href*=#]:not([href=#])').on('click', function(e) { 
     e.preventDefault(); 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var $target = $(this).attr('href'); 
      if ($target.size()) { 
       $('html,body').animate({ 
        scrollTop: $target.offset().top 
       }, 2000); 
      } 
     } 
    }); 
}); 

Btw, non sono sicuro di capire il selettore che si sta utilizzando a[href*=#]:not([href=#]). Inoltre, la condizione (if location.pathnae.blah...) sembra piuttosto imbarazzante. Vorrei semplicemente fare qualcosa di simile:

$(function() { 
    $('#some-wrapper').on('click', 'a.scroll-to', function(e) { 
     e.preventDefault(); 
     var $target = $(this).attr('href'); 
     if ($target.size()) { 
      $('html,body').animate({ 
       scrollTop: $target.offset().top 
      }, 2000); 
     } 
    }); 
}); 

Answer 2

1. Usa e.preventDefault(); per evitare che il codice da aggiungere # nel tuo attuale url

È inoltre possibile utilizzare questo codice per lo scorrimento a una sezione particolare su qualsiasi pagina:

HTML:

<div id = 'a' style = 'height:300px;'> 
123 
</div> 
<a href= '#b'>Go to 456 </a> 

<div id = 'b' style = 'height:300px;' > 
456 
</div> 
<a href= '#c'>Go to 789 </a> 

<div id = 'c'style = 'height:300px;' > 
789 
</div> 
<a href= '#d'>Go to asd </a> 

<div id = 'd' style = 'height:300px;' > 
asd 
</div> 
<a href= '#e'>Go to fgh </a> 

<div id = 'e' style = 'height:300px;' > 
fgh 
</div> 
<a href= '#a'>Go to 123 </a> 

SCRIPT:

function scroll(id){ 
    $('html, body').animate({ 
     scrollTop: $(id).offset().top 
    }, 2000); 
} 
$(document).ready(function() { 
    $('a[href*=#]:not([href=#])').click(function (e) { 
     var id = $(this).attr('href') 
     scroll(id); 
     e.preventDefault(); 
    }); 
}); 

DEMO: http://jsfiddle.net/ishandemon/k19p33tm/

http://jsfiddle.net/ishandemon/k19p33tm/1/