Jquery: ScrollTo-funktion med namnade länkar

Hej,

om jag har en sida som heter webforum/test med flera namnade länkar, exempelvis #niklas

Om jag från en annan sida vill länka till just niklas så länkar jag så här: webforum/test/#niklas

Än så länge fungerar det fint, vad som händer är att jag kommer direkt till sidan där niklas börjar.

Men jag har sett på sidor (kommer inte ihåg de nu) att man scrollas ner från toppen till sin namnade länk.

Jag har hittat en liknande funktion, men den fungerar inte med länkar från andra sidor. http://mix26.com/demo/local_scroll/index.html

Jag har dock testar med detta men får det inte till att fungera, någon ser problemet?

var elem = $('#' + window.location.hash.replace('#', ''));
    	if(elem) {
         	$.scrollTo(elem.left, elem.top);
	}

elm är ett jquery objekt, left och top finns inte i jquery, left och top som funktioner finns, är det det du är ute efter?
eller kör jquerys position(): http://api.jquery.com/position/

Får inte riktigt till det. Jag har ju ett enkelt script för animate, men får inte riktigt till det med location.hash. Hur kan jag få det att scrolla ner till min anchor?

$('html, body').animate({scrollTop: '0px'}, 300);

vad har du för kod idag då du vill implementera? eller du vill ha en kod som ta och animera från start? Vilket plugin använder du?

Att skapa animationen vet jag inte ens om det är möjligt spontant, för när sidan hittar sitt ankare så gå den ner dit by default (utan javascript) så jag vet inte ens om det är möjligt att fixa för att skriva över vad webbläsaren gör by default.

http://mix26.com/demo/local_scroll/index.html#contact

ser du att den inte animera heller.

När jag skriver in webforum/test/#niklas i browsern så hamnar jag direkt på #niklas.

Vad jag vill är att den ska visa toppen först och sedan scrolla ner till #niklas. Jag vet bara inte hur jag får till det, har sökt hela förmiddagen ;)

bikic skrev:

När jag skriver in webforum/test/#niklas i browsern så hamnar jag direkt på #niklas.

Vad jag vill är att den ska visa toppen först och sedan scrolla ner till #niklas. Jag vet bara inte hur jag får till det, har sökt hela förmiddagen ;)

Att skapa animationen vet jag inte ens om det är möjligt spontant, för när sidan hittar sitt ankare så gå den ner dit by default (utan javascript) så jag vet inte ens om det är möjligt att fixa för att skriva över vad webbläsaren gör by default.

Har aldrig haft intresset att kolla upp detta men jag gissar på att det inte gå att "hindra" default beteendet på detta.

Det du kan göra är att inte länkar till id="niklas" eller en <a name="niklas"> utan gå mot något annat och scrollar till den.

Om du visar mig hur jag lokaliserar anchor name så kanske jag kan klura ut resten.

Om sidan har ett anchorname så ska den göra detta...

ett ankare är ju #niklas

<a name="niklas">...</a>

och <span id="niklas">...</span> är "samma" sak när det gäller ankare.

Du kan ju försöka att vid varje sidladdning så skrollar du upp högst upp på sidan (utan någon animation) och sen kör du animeringen ner till #niklas.

var elem = $('#' + window.location.hash.replace('#', ''));
if(elem) {
	var position = elem.position();
	$('html, body').animate({scrollTop:0}, 0).animate({scrollTop:position.top}, 500);
}

demo:
http://voigt.se/sandbox/scrollTo/#about

Är det detta du vill skapa?

Exakt! Fast detta ska kunna fungera med att man länkar från en annan sida men det gör inte detta. Att fixa en scroll på namnade länkar på en sida är en baggis, men att få den att först lokalisera toppen och sedan scrolla ner till den namnade länken är en gåta.

Det gör den ju, du kan inte få in logiken från din sida till min (om jag inte själv kör samma skript).

Kan du komma med ett exempel och berätta vad du vill att det skall göra? fattar inte alls vad du vill göra.

Tack! Det fungerade.

Jag la även in en timeout så att den inte scrollar ner direkt.

// Scroll to anchors

	var elem = $('#' + window.location.hash.replace('#', ''));

	if(elem) {
		var position = elem.position();
		$('html, body').scrollTop(0);
		setTimeout(function(){
			$('html, body').animate({scrollTop:position.top}, 1000);
		}, 750);
	}