Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]zmiana adresu strony - funkcja location.hash
Forum PHP.pl > Forum > Przedszkole
interu58
1.09.2014, 01:31:08
Witam.

Chce stworzyć stronę w formacje "one page website".
Mam taki o to kod:

<html>

<head>

</head>
<body>

<div id="header">
<div id="nav">
<a href="#strona1">1</a>
<a href="#strona2">2</a>
<a href="#strona3">3</a>

</div>
</div>

<div id="page-wrap">

<div id="strona1">
<a name="1"></a>
<div class="page-padding"></div>
<p></p>
</div> <!--END strona1-->

<div id="strona2">
<a name="2"></a>
<div class="page-padding"></div>
<p>This is what you would see on the Portfolio page.</p>
</div> <!--END strona2-->

<div id="strona3">
<a name="3"></a>
<div class="page-padding"></div>
<p></p>
</div> <!--END strona3-->

</div> <!--END page-wrap-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1500);
return false;


});
}
}
});
});</script>
</body>
</html>

i działa to w ten sposób, że jak wciskam na poszczególne pozycje menu to strona się przewija, ale nie zmienia się adres strony, który bez różnicy, czy wybiorę z menu opcje 1 czy 2 zawsze jest ten sam, a co za tym idzie nie będzie jak podlinkować poszczególnych pozycji menu. Znalazłem, że można ten problem rozwiązać za pomocą funkcji location.hash. Kiedy wpisuje noAfter:function() {location.hash=id} to i owszem adres strony się zmienia czyli wyskakuje mi #1, #2 czy #3, ale nie działa już przewijanie. Niestety nie znam zbyt dobrze js, szukam rozwiązania już jakiś czas i nic mi nie działa poprawnie.

Mógłby mi ktoś podpowiedzieć co mógłbym zrobić, żeby przewijanie działało razem ze zmianą adresu strony?

Z góry dziękuję za pomoc.
kamilo818
1.09.2014, 08:53:15
ja to robię tak. Działa super

[PHP] pobierz, plaintext 
  1. 	var $root = $('html, body');
  2. 	$('a').click(function() {
  3. 		var href = $.attr(this, 'href');
  4. 		$root.animate({
  5. 			scrollTop : $(href).offset().top
  6. 		}, 500, function() {
  7. 			window.location.hash = href;
  8. 		});
  9.  
  10. 		return false;
  11. 	});
[PHP] pobierz, plaintext


Prosto, łatwo i przyjemnie smile.gif
interu58
1.09.2014, 12:48:48
Dzięki wielkie smile.gif

Działa, ale.... przy powrocie z samego dołu strony za pomocą suwaka na samą górę już adresy nie przeskakują. wracam na samą górę a w adresie mam nadal #3. tak samo jest jak używam suwaka do przejścia na sam dół. funkcja działa tylko w przypadku wybierania pozycji z menu.
kamilo818
1.09.2014, 14:13:53
Jeśli chcesz żeby przesuwając suwakiem/scrollem zmieniał ci sie adres i aktywne menu to musisz określić która pozycja suwaka należy poszczególnych cześci strony.
Określasz położenie/początek podstrony za pomocą 
[PHP] pobierz, plaintext 
  1.  var poczatek = $('nazwa').offset().top 
[PHP] pobierz, plaintext
i określasz koniec 
[PHP] pobierz, plaintext 
  1.  var koniec = poczatek + $('nazwa').height() 
[PHP] pobierz, plaintext
. Jesli suwak jest na tej wysokości to podwietlasz konkretny link w menu i zmieniasz location.hash
interu58
2.09.2014, 02:11:07
nie działa mi to niestety. próbowałem to przerobić, ale chyba za mało znam js.
kamilo818
2.09.2014, 06:37:59
Kiedyś zrobiłem to tak. Pewnie można to jakoś udoskonalić, ale działa świetnie
[PHP] pobierz, plaintext 
  1.                $(window).scroll(function(){ 
  2.  
  3.  
  4.  
  5. 			        var pozycja_news = $('.news').offset().top;
  6.  
  7.                     var pozycja_oferta = $('.oferta').offset().top;
  8.  
  9. 			        var pozycja_o_nas = $('.o_nas').offset().top;
  10.  
  11. 	   				var pozycja_powierzchnie_biurowe = $('.powierzchnie_biurowe').offset().top;
  12.  
  13. 			        var pozycja_powierzchnie_handlowe = $('.powierzchnie_handlowe').offset().top;
  14.  
  15. 			        var pozycja_kontakt = $('.kontakt').offset().top;
  16.  
  17. 			        var ScrollTop = parseInt($(window).scrollTop());
  18.  
  19. 			        if (ScrollTop >= pozycja_news-20 && ScrollTop < pozycja_news+70+$('.news').height()) {
  20. 			            document.getElementById("news_link").className = "active";
  21. 			        }else{
  22. 			        	document.getElementById("news_link").className = "normal";
  23. 			        }
  24.                                 if (ScrollTop >= pozycja_oferta-20 && ScrollTop < pozycja_oferta+20+$('.oferta').height()) {
  25. 			            document.getElementById("oferta_link").className = "active";
  26. 			        }else{
  27. 			        	document.getElementById("oferta_link").className = "normal";
  28. 			        }
  29. 			        if (ScrollTop >= pozycja_o_nas-20 && ScrollTop < pozycja_o_nas+20+$('.o_nas').height()) {
  30. 			            document.getElementById("o_nas_link").className = "active";
  31. 			        }else{
  32. 			        	document.getElementById("o_nas_link").className = "normal";
  33. 			        }
  34. 			        if (ScrollTop >= pozycja_powierzchnie_biurowe-20 && ScrollTop < pozycja_powierzchnie_biurowe+20+$('.powierzchnie_biurowe').height()) {
  35. 			            document.getElementById("powierzchnie_biurowe_link").className = "active";
  36. 			        }else{
  37. 			        	document.getElementById("powierzchnie_biurowe_link").className = "normal";
  38. 			        }
  39. 			        if (ScrollTop >= pozycja_powierzchnie_handlowe-20 && ScrollTop < pozycja_powierzchnie_handlowe+20+$('.powierzchnie_handlowe').height()) {
  40. 			            document.getElementById("powierzchnie_handlowe_link").className = "active";
  41. 			        }else{
  42. 			        	document.getElementById("powierzchnie_handlowe_link").className = "normal";
  43. 			        }
  44. 			         if (ScrollTop >= pozycja_kontakt-20 && ScrollTop < pozycja_kontakt+30+$('.kontakt').height()) {
  45. 			            document.getElementById("kontakt_link").className = "active";
  46. 			        }else{
  47. 			        	document.getElementById("kontakt_link").className = "normal";
  48. 			        }
  49.  
  50.  
  51. 			    });
[PHP] pobierz, plaintext
interu58
15.09.2014, 14:49:24
Dzięki wielkie:) wypróbuje.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.