Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailemVyřešeno html, js - Odsazený odkaz na záložku

Zdravím,
klasická situace:

.
.
.
<h1 id="nadpis">Nadpis</h1>
.
.
.
.
.
<a href="#nadpis">Odkaz na záložku</a>
.

Když kliknu na Odkaz na záložku, stránka se vyscrolluje na nadpis.
Jak by se dalo zařídit, třeba pomocí jQuery, aby se Nadpis nezobrazil úplně nahoře (protože tam mám menu fixně), ale 50px od TOPu okna a aby to fungovalo z odkazu z dané stránky, kde se záložka nachází, ale i z externích stránek...

Díky

Předmět Autor Datum
Bez záruky např.: $('body').scrollTo('#nadpis'); $('body').scrollTo(-50); Se zárukou: $('#nadpis…
Flash_Gordon 27.05.2013 15:09
Flash_Gordon
A půjde to i když se na to odkážu z externího odkazu? Třeba z /indexu na /novinky#prvni
lukinpark 27.05.2013 15:32
lukinpark
Vždycky jde zajistit, aby to fungovalo. Ovšem máš správný postřeh, že ve výchozím stavu to fungovat…
Flash_Gordon 27.05.2013 15:40
Flash_Gordon
No jasně, všechno jde :-) Jen právě nevím, jak to kontrolovat
lukinpark 27.05.2013 15:43
lukinpark
Do události po načtení dokumentu zavoláš: var url = "www.aaa.com/html.php#kotva1"; // url = window.…
Flash_Gordon 27.05.2013 15:51
Flash_Gordon
Někde je chyba... když je hodnota -50 (tedy záporná), konzole mi vyhodí chybu: Uncaught TypeError:…
lukinpark 27.05.2013 16:11
lukinpark
Toš co no. Možné varianty: - Je chyba v argumentu 1 - Je chyba v argumentu 2 '#'+kotva nahraď něčí…
Flash_Gordon 27.05.2013 16:16
Flash_Gordon
Taky nepomáhá... Zkusil jsem to i barbarsky nějak takto, kdy jsem místo kotvy použil PHP proměnné v…
lukinpark 27.05.2013 16:28
lukinpark
Pfffffff ! Kód, který zajistí posunutí: <script src="http://code.jquery.com/jquery-1.8.2.min.js"><…
Flash_Gordon 27.05.2013 17:33
Flash_Gordon
Tak to mě po*er :D ono to nefungovalo jen kvůli těm parametrům pro scrollTo :D Díky moc... poslední
lukinpark 27.05.2013 17:50
lukinpark

Vždycky jde zajistit, aby to fungovalo.
Ovšem máš správný postřeh, že ve výchozím stavu to fungovat nebude.

Napadá mě například po načtení dokumentu kontrolovat parametry url adresy a aktivovat následně posun.

To je ale řeč jen jak to udělat za každou cenu, bez alternativ.

Mě například přijde praktičtější do stránky vkládat prázdné odkazy, které budou sedět přesně.
Nebo vytvářet odkazy přímo na dané MENU.

Taky nepomáhá...
Zkusil jsem to i barbarsky nějak takto, kdy jsem místo kotvy použil PHP proměnné v $_GET:

	$(document).ready(function() {

		var url = window.location.href;
		var kotva = url.substring(url.indexOf("?")+1);
		var kotva = kotva.substring(0,kotva.indexOf("="));

		alert(kotva);

		if(url.indexOf("?") != -1) {
			alert('#'+kotva+' - '+($('#'+kotva).position().top-150));
			$('#'+kotva).scrollTo(($('#'+kotva).position().top-150));
		}

	});

v alertu se mi všechno zobrazuje správně... jak pozice, tak názvy, tak vše... ale nic se neděje...

Pfffffff !

Kód, který zajistí posunutí:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1.js"></script>
<script>
$(document).ready(function() {

var element = '#kotva1'


$('body').scrollTo( $(element).position().top-50  ,{duration:'slow' });
});

</script>

Kde do proměnné element načteš element.
-50 je -50px
Funkční odkaz přiložen.

Zpět do poradny Odpovědět na původní otázku Nahoru