Dynamiczne przewijanie treści do wskazanej kotwicy


(arlid) #1

Witajcie. Chciałbym uzyskać efekt fajnego, dynamicznego przewijania do wskazanej w adresie kotwicy. Standardowo jest to czysty "skok", a ja chciałbym uzyskać animacje tego przewijania, coś jak na sliderach. Próbowałem coś wykombinować, ale nic mi nie wyszło.


(adpawl) #2

http://plugins.jquery.com/project/ScrollTo

> http://flesler.blogspot.com/2007/10/jqu ... ll-10.html


(arlid) #3

Znalazłem to także, ale nie jestem na tyle zaznajomiony z jquery by napisać skrypt, co i jak przewijać, a samo dołączenie biblioteki scrollTo nic nie daje i w przypadku braku wiedzy do napisania skryptu jest mi zbędne, bo i tak nic z tego nie wymyślę. Mogłem wspomnieć, że o tym czytałem, ale jakoś przeoczyłem. akt, efekt jest taki jaki bym chciał, ale jak ja tego wdrążyć nie umiem, a przykładów z kodem skryptu nie znalazłem.


(mario@) #4

Coś takiego?

skok
 

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
srodek

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
 
gora
srodek
dol
aasdasd asdas dasd asd as das dasds dsad sa dsadas

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc

tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
tresc
skok
 






[/code]

(arlid) #5

Wolałbym bez JS i elementów onclick itd. Pomysł ciekawy, ale troszke jak dla mnie zagmatwany i trudny do zrozumienia i troszkę za ociężały do zastosowania.


(Damgora) #6

Nie ma chyba innego (a na pewno prostszego) rozwiązania niż JS. Niżej nieco inny kod:

function verticalPosition(el){

	var pos = 0;

	while(el.offsetParent){

		pos += el.offsetTop;

		el = el.offsetParent;

	}

	return pos;

}


function aScrollTo(el, t){

	var from = window.scrollY;

	var to = verticalPosition(el);

	var f = 25*t;

	var i = 1;

	var interval = window.setInterval(

		function() {

			if (i < f)

				window.scrollTo(window.scrollX, from-(Math.cos(i++/f*Math.PI)-1)/2*(to - from));

			else{

				window.scrollTo(window.scrollX, to);

				window.clearInterval(interval);

			}

		}, 40);

}

w funkcji aScrollTo(el, t) el to element do którego strona ma się przewinąć, t to czas w sekundach


(Krk) #7

Zgadza się - samo dołączenie nic nie daje, bo najpierw należy dołączyć bibliotekę JQuery, a następnie ScrollTo (lub localScroll).

Wywołanie ScrollTo nie powinno sprawić Ci problemu - pod poniższymi linkami znajdziesz przykłady użycia obu bibliotek.

scrollTo - http://demos.flesler.com/jquery/scrollTo/

localScroll - http://demos.flesler.com/jquery/localScroll/


(arlid) #8

kRk_PL , wiem, że należny dołączyć najpierw bibliotekę jQuery. Mimo to trzeba napisać kod o tym przewijaniu, bo wklepanie linka wykorzystującego scrollTo nic nie da. Wg mnie trzeba napisać "dodatkowy" skrypt do wywoływania efektu scroolTo, a ja tego nie umiem zrobić, a rozwiązania na jakim mógłbym się bazować nie znalazłem.


(Krk) #9

A to dziwne, bo stron z przykładami dotyczącymi w/w bibliotek jest sporo, począwszy od strony autora (http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html).

Wystarczy, że dodasz poniższy kod do swojej witryny i będzie działało:

Cały (bardzo prosty) przykład możesz podejrzeć tutaj: http://wklej.org/id/421663/

Pamiętaj, że plugin posiada opcje konfiguracyjne, z którymi warto się zapoznać.


(arlid) #10

Wyczytałem, że można zrobić coś takiego, że przewija się tylko "wskazany" div w szablonie. Chodzi o dodanie

$('#navigation').localScroll({

   target:'#content'

});

, jak rozumiem tutaj

i ma wyjśc coś takiego

i nie wiem czy dobrze zrozumiałem, ale tylko wskazany div (tutaj content) będzie się przewijał, a reszta zostanie statyczna. Problem mam tylko z tym po co jest #navigation oraz jak to dalej zastosować, bo nic konkretnego mi nie wyszło, choć próbowałem.

EDIT: Czy w tym #navigation chodzi o to, że wtedy działają tylko zgrupowane w tym divie linki? A jak się tego nie doda, to chodzi o wszystkie odnośniki?