ScrollTo kod nie chce działać

pytanie zadane 30 czerwca 2015 w JavaScript przez supersmok25 Użytkownik (510 p.)

Witam

Czy jest ktoś w stanie powiedzieć czemu ten kod nie chce działać ?

Link do jsfiddla

http://jsfiddle.net/supersmok25/62k1jzok/2/#&togetherjs=LcQDPux4FF

2 odpowiedzi

odpowiedź 30 czerwca 2015 przez Grzesiek Eleryk Mądrala (6,820 p.)

Wywołujesz funkcję kliknięcia na element podczas ładowania strony. <- ŹLE

$(function() {}); // strona jest gotowa na zapisanie zmiennych i funkcji w jQuery

Poczytaj i popróbuj jak działają zmienne w js i jQuery.

Zobacz to : https://css-tricks.com/examples/SmoothPageScroll/

Kliknij F12 i sprawdź o co dokładnie chodzi w kodzie.

komentarz 30 czerwca 2015 przez Comandeer Guru (600,810 p.)

Nie żeby coś, ale przecież podpięcie się pod zdarzenie load jest tak samo skuteczne… polecam poczytać o różnicy między wczytaniem drzewka DOM a wczytaniem całego dokumentu

odpowiedź 30 czerwca 2015 przez Comandeer Guru (600,810 p.)

Nie da się przewijać elementu - da się przewinąć stronę do danego elementu. Dodatkowo nie istnieje w jQuery metoda $.fn.scrollTo. Można za to animować scrolla - coś typu:

$('html, body').animate({
    scrollTop: $('#cel').offset().top
});

komentarz 30 czerwca 2015 przez supersmok25 Użytkownik (510 p.)

Owszem nie istnieje dlatego zastosowałem dodatkowy plugin

https://github.com/flesler/jquery.scrollTo

komentarz 30 czerwca 2015 przez Comandeer Guru (600,810 p.)

To i tak powinieneś odpalać to na oknie albo elemencie, który da się przewijać (ma overflow: auto): http://jsfiddle.net/62k1jzok/5/

BTW IMO tego typu pluginy są niepotrzebne, bo da się to machnąć w samym jQuery

komentarz 30 czerwca 2015 przez supersmok25 Użytkownik (510 p.)

Też to zauważyłem dlatego zrobiłem to w ten sposób

$(document).ready(function() { 
 
	$('a[href^="#"]').on('click', function(event) {
	
		var target = $( $(this).attr('href') );
	
		if( target.length ) {
			event.preventDefault();
			$('html, body').animate({
				scrollTop: target.offset().top
			}, 1000);
		}
	});
 
});