jQuery scrollTop nie działa z linkiem kwerendy

Question

mam nawigację i początkowe url wygląda następująco:

test.php?query=19

i mam linki na mojej stronie jak Więc <a href="#section-1">Section 1</a><a href="#section-2">Section 2</a><a href="#section-3">Section 3</a>

z 3 części:

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

i używam tego kodu jquery, aby przewinąć do tej sekcji od góry strony (lub gdy użytkownik znajduje się na p wiek) na początku tej sekcji i nie wyświetlaj tagu # w moim adresie 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; 
      } 
     } 
    }); 
}); 

Mój problem polega na tym, że nie przewija się do sekcji. po prostu przechodzi do dolnej sekcji sekcji, a następnie przewija do góry, a w moim adresie URL pojawia się #.

mam innego menu na mojej głównej stronie głównej:

home.php i używam dokładnie ten sam kod jquery i działa na tej stronie.

Moje pytanie brzmi: w jaki sposób mogę uzyskać scrollTop pracować w moim test.php?query=19 stronie jak to robi na home.php Kiedy klikam na podobnym na test.php?query=19 moje zmiany adresu URL do tego: test.php?query=19#section-1

Answer 1

chciałbym zmienić logikę jesteś obsługa twojego kodu. Zapobieganie domyślnemu zdarzeniu i uzyskiwanie dostępu do href bezpośrednio przez attr.

coś takiego:

$(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, nie jestem pewien o zrozumienie selektor używasz a[href*=#]:not([href=#]). Również stan (if location.pathnae.blah...) wydaje się dość niezręczny. Chciałbym po prostu zrobić coś takiego:

$(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. Zastosowanie e.preventDefault(); aby zapobiec kod dodawania # w bieżącym url

Można również użyć tego kodu do przewijania do określonej sekcji na dowolny strona:

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> 

SCENARIUSZ:

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/