Przejście do strony + automatyczny scroll

Question

Cześć,

do swojej strony dodałam skrypt przewijania do różnych nagłówków po kliknięciu w zadany odnośnik umieszczony w nawigacji (tak jak w odcinku HTML #4).

Od paru dni borykam się z problemem:

Po przejściu do nowej podstrony, na której widnieje ta sama nawigacja co na stronie głównej chciałabym uzyskać efekt przekierowania do strony głównej (z tym nie mam problemu) oraz automatycznego scrolla do odpowiedniej sekcji.

Mam nadzieję, że będzie to w miarę zrozumiałe, jestem mocno początkująca.Z góry dziękuję za pomoc lub podpowiedź.

Answer 1

Poprawnie zapisz linki.

Jeśli na stronie 1 masz sekcje #omnie i scrolujesz do niej po kliknięciu to adres wygląda tak www.strona.com/#omnie czy tam index.html#omnie.

To spróbuj na tej drugiej stronie, w nawigacji zachować taką samą strukturę linków. Tj. z hashami, np.

<a href="www.strona.pl/#omnie">O mnie</a>,

czy tam <a href="index.html#omnie">O mnie</a>

Comments

Moja funkcja wygląda w ten sposób:

jQuery(function($)
		{
	//		zresetuj scrolla
		$.scrollTo(0);
		$('#link2').click(function() { $.scrollTo($('#omnie'), 500); });
		$('#link3').click(function() { $.scrollTo($('#kontakt'), 500); });
	
		}	);

Próbowałam rozwiązać mój problem w sposób podany w odpowiedzi, aczkolwiek nie działa.

Funkcja wyszukuje elementy wyłącznie po nadanym id, może mogłabym to jakoś zmodyfikować, aby wyszukiwało właśnie po np. "index.html/#omnie"?

---

$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});

 

Zamiast podpinać event do każdego linku z osobna użyj tego kodu.

I teraz jak zrobisz link z hashem. Np. <a href="#omnie">o mnie</a>

To będzie Ci skrolować do sekcji z id "omnie".

 

Sprawdź ten sposób i daj znać czy działa.

---

Wielkie dzięki za funkcję, faktycznie działa sprawnie i bez zbędnych podpięć.

Jedynym mankamentem jest fakt, że nie działają mi w tym momencie żadne linki zewnętrzne na stronie, tym samym przejście np. do podstrony.

---

Konsola coś zwraca? Kiedy klikasz w normalny link.

http://jsfiddle.net/9SDLw/6885/

Tutaj działają zewnętrzne linki, więc coś musi być u Ciebie nie tak.

---

"skrypt.js:55 Uncaught TypeError: Cannot read property 'top' of undefined"

to odnośnie tej linijki kodu "  scrollTop: $( $.attr(this, 'href') ).offset().top", tylko to się pojawia w konsoli za każdym razem po kliknięciu w link..

ale generalnie skrypt działa.