webForumDet fria alternativet

Jquery: ScrollTo-funktion med namnade länkar

JavaScript

11 svar · 1 060 visningar · startad av bikic

Medlem sedan juni 2006261 inlägg
Frågan#1

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);
	}
Medlem sedan juni 20019 519 inlägg
#2

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/

Medlem sedan juni 2006261 inlägg
#3

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);
Medlem sedan juni 20019 519 inlägg
#4

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.

Medlem sedan juni 2006261 inlägg
#5

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 ;)

Medlem sedan juni 20019 519 inlägg
#6

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.

Medlem sedan juni 2006261 inlägg
#7

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...

Medlem sedan juni 20019 519 inlägg
#8

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.

Medlem sedan juni 20019 519 inlägg
#9
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?

Medlem sedan juni 2006261 inlägg
#10

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.

Medlem sedan juni 20019 519 inlägg
#11

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.

Medlem sedan juni 2006261 inlägg
#12

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);
	}
263 ms totalt · 4 externa anrop · v20260731065814-full.868a69e5
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)