JavaScript Beim umblättern zum Anfang eines Bereiches springen

[digiTALE]

Hey ho,

fologende Situation:
Für meine Firma überarbeite ich momentan die Website. In der Kategorie "Presse" habe ich die Berichte auf mehrere Seiten verteilt. Mit Ajax hab ich es soweit eingestellt, das nur die Berichte in einem DIV-Container id="presse" beim umblättern neu geladen werden. Funktioniert wunderbar.

Meinme Frage:
Wie bekomm ich es hin, das die Seitenansicht beim umblättern an den DIV-Container id="presse" Anfang springt, sodass der Besucher wieder von oben nach unten die Berichte durchschauen kann?


Seitenanzeige:

<div id="presse">

	<div id="box1">
		// Auflistung der Berichte
	</div>


	<div id="box2">
		// Auflistung der Berichte
	</div>


	<div class="seite">
		<img id="imgPresse" src="/www/image/loading.gif" style="display:none; margin: 0 8px;" alt="" />
		<ul>
		<li class="active">Seite</li>
		<li><a href="/unternehmen/presse/1/" onclick="loadEntry('/unternehmen/presse/seite/1/', 'true'); return false;">1</a></li>
		<li><a href="/unternehmen/presse/2/" onclick="loadEntry('/unternehmen/presse/seite/2/', 'true'); return false;">2</a></li>
		<li class="active">3</li>
		<li><a href="/unternehmen/presse/4/" onclick="loadEntry('/unternehmen/presse/seite/4/', 'true'); return false;">4</a></li>
		</ul>
	</div>

</div>

Ajax:

function loadEntry(url, is_open)
{
	http_request.open("get", url, true);
	http_request.onreadystatechange = function() { handleEntry(is_open); };
	http_request.send(null);

}
function handleEntry(is_open)
{

	if (http_request.readyState == 1)
	{
		if (is_open)
		{
		  document.getElementById("imgPresse").style.display = "inline";
		}
		else
		{
		  document.getElementById("imgPresse").style.display = "none";
		}
	}
	if (http_request.readyState == 4)
	{
		document.getElementById("container").innerHTML = http_request.responseText;
		document.getElementById("imgPresse").style.display = "none";
		if (is_open)
		{
		  document.getElementById("container").style.display = "block";
		}
		else
		{
		  document.getElementById("container").style.display = "none";
		}
		
	}
}

 

[Kagee]

indem du einen anchor setzt und aufrufst:

<a name="topOfPage"></a>
<div id="presse">
[...]

und dann kannst du den aufrufen per #:

<a href="#topOfPage"></a>

bzw direkt bei Seitenaufruf:

meineseite.html#topOfPage

 

[digiTALE]

@Kagee

So funktioniert es nicht wirklich. Ich habe es auch schon probiert. Beim übergeben der Links zum Script aber er ignoriert es.

onclick="loadEntry('/unternehmen/presse/seite/1/#presse', 'true'); return false;"

Edit: Auch innerhalb des DIV-Containers "presse" schlägt es mit dem a-Tag fehl.

<div id="presse">

	<a name="topPress"></a>

	<div id="box1">
		// Auflistung der Berichte
	</div>


	<div id="box2">
		// Auflistung der Berichte
	</div>


	<div class="seite">
		<img id="imgPresse" src="/www/image/loading.gif" style="display:none; margin: 0 8px;" alt="" />
		<ul>
		<li class="active">Seite</li>
		<li><a href="/unternehmen/presse/1/" onclick="loadEntry('/unternehmen/presse/seite/1/#topPress', 'true'); return false;">1</a></li>
		<li><a href="/unternehmen/presse/2/" onclick="loadEntry('/unternehmen/presse/seite/2/#topPress', 'true'); return false;">2</a></li>
		<li class="active">3</li>
		<li><a href="/unternehmen/presse/4/" onclick="loadEntry('/unternehmen/presse/seite/4/#topPress', 'true'); return false;">4</a></li>
		</ul>
	</div>

</div>

 

[QXARE]

Ruf nachdem du das Script ausgeführt hast mit window.location.href die URL mit dem Anker auf.

 

[digiTALE]

Wenn ich das so probiere, dann lädt er quasi die Seite neu, nur mit den Presseberichten. Das ist auch noich nicht die Lösung :-(

 

[QXARE]

Habe mir nochmal deinen Code angeschaut. Es kann so auch nicht funktionieren. Alle IDs die du vergibst kannst du als Anker verwenden. Versuchs mal mit #presse anstatt #topPress.

 

[digiTALE]

@ QXARE

siehe #3 Post von mir, der erste HTML-Code. Hab es schon probiert, aber bleibt partu unten beim seiten umblättern und will nicht nach oben springen.

 

[matze.NET]

http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to

 

[digiTALE]

@ matze.NET

Danke, genau das ist es was ich suche.


Edit: Kennt noch jemand ein Hinweis wie ich das sanft hochscrollen lasse?

 

[QXARE]

Mit setInterval könntest du immer scrollTo aufrufen und die Leiste um 1px oder so verschieben.

 

[digiTALE]

Ich würde meinen das es für meine Zwecke nicht ganz geeignet ist. Ich hab es zwar ausprobiert aber es funktioniert nicht, ausser ich hab es falsch angewandt!?

Ajax

[...]
function scroll() {
	window.scrollTo(0, 250);
}


function loadEntry(url, is_open)
{
	http_request.open("get", url, true);
	http_request.onreadystatechange = function() { handleEntry(is_open); };
	http_request.send(null);
	var aktiv = window.setInterval("scroll()", 50);
	window.clearInterval(aktiv);
}
[...]

 

[QXARE]

Du müsstest zuerst den y-Wert vom Element ausrechnen wo du hinscrollen möchtest.

Dann lässt du das Intervall solange aktiv bis der y Abstand vom Scrollbalken gleich dem vom Element ist und währenddessen scrollst du halt um ein paar Pixel.