Div und body scrollposition in Textfeld schreiben => IE

DrBonsai · 27. Oktober 2013

Hallo zusammen,

ich möchte gerne, dass meine Seite nachdem ein Formular gesendet wurde (reines php, kein AJAX o.ä) wieder auf die zuvor engestellte Scrollposition springt.

Momentan habe ich das folgendermaßen gelöst:

HTML:

<body onscroll="scroll_position.value = window.pageYOffset;">
           [...]
          <form name="checkout_information_form" method="post" >
              <input type="hidden" readonly="readonly" id="scroll_position" name="scroll_position" />
              <input type="submit" name="checkout_check_order" value="Bestellung prüfen" />
          </form>
           [...]
<?php	
if(isset($scroll_position))
	{
	echo "
	<script type='text/javascript'>
		window.scrollTo(0,".$scroll_position.")
	</script> ";
	}
?>

Die aktuelle Scrollposition (Y-Achse) wird also in das Feld scroll_position geschrieben und per php mitgesendet.
Wenn die Seite geladen wird, scrollt sie sofort wieder an die Position

PHP:

/*Scrollposition*/
if(isset($_POST['scroll_position']))
	{
	$scroll_position = $_POST['scroll_position'];
	#var_dump($scroll_position);
	}

Jetzt habe ich zwei Probleme:
1) Wie immer geht es nicht im Internet Explorer (Version 10.0)
Wie kann ich das Ganze so umbauen, dass es im IE auch klappt?

2) Einige Formulare (Warenkorb bspw.) gebe ich in Popups aus (DIV-Layer, absolut positioniert, die bei Bedarf eingeblendet werden). Diese haben eine maximale Höhe, so dass auch hier u.U. scrollbars entstehen, wenn der Inhalt zu lang wird.
Ich habe keine Ahnung, wie ich dann erreichen kann, dass das entsprechende <div id="popup"> an die vorgegebene Position scrollt, bzw. wie ich die entsprechende Position in ein Textfeld kriege und hinterher per JS den Layer an diese Position scrollen kann.

Wahrscheinlich müsste ich das Ganze irgendwie aus dem <body>-tag rausholen, da dieser ja nicht gescrollt wird, wenn ich mich im Popup befinde, richtig? Nur wie, habe ich keine Ahnung. Die angewandte Lösung habe ich mir zusammengefuchst, ohne echtes js-Verständnis, leider.

Kann mir hier jemand weiterhelfen diesbezüglich?

Besten Dank,

David

Quaese · 28. Oktober 2013

Hi,

zu 1.
Eventuell kannst du die Seite mit dem erforderlichen Zusatz an der URL aufrufen, so dass zum gewünschten Element gesprungen wird.

Code:

#ElementIdOderName

zu 2.
HTML-Element besitzen die Eigenschaft scrollTop, mit deren Hilfe die Scrollposition gesetzt werden kann.

Code:

htmlElement.scrollTop = 50;

Ciao
Quaese

tombe · 28. Oktober 2013

Auf dieser Seite gibt es mehrere Buttons mit denen die Seite neu geladen werden kann. Die aktuelle Position wird beim Scrollen in das Textfeld geschrieben und beim Laden der Seite wird automatisch zu diese Position gesprungen sofern ein Wert vorhanden ist. Das "Popup"-Fenster wird immer oben an der Seite eingeblendet wenn man auf einen der "Einblenden"-Links klickt.

Sofern ich alles richtig verstanden habe sollte es das sein was du suchst!?

Man möge mit verzeihen das ich so viel "sinnlosen" Code einstelle, aber ohne die ganzen p-Tags funktioniert das Beispiel nicht.

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// beim Laden der Seite prüfen ob Positionsangaben übergeben werden
<?php
	if (isset($_POST['sub'])) {
?>
	$(window).scrollTop(<?php echo $_POST['pos']; ?>);
	alert("Seite neu geladen, springe zu Position <?php echo $_POST['pos']; ?>");
<?php
	}
?>

	$(window).scroll(function() {
// aktuelle Position in Textfeld schreiben
		$("#pos").val($(window).scrollTop());
// Popup-Fenster falls sichtbar wieder ausblenden
		$("#popup").css("display", "none");
	});

	$(".pop").click(function() {
// Popup-Fenster neu positionieren und anzeigen
		$("#popup").css("top", $(window).scrollTop() + "px");
		$("#popup").css("display", "block");
	});
});
</script>

HTML:

<form name="form" action="test.php" method="post">
<div id="popup" style="position: absolute; width: 200px; top: 0px; left: 100px; height: auto; display: none;"><h1>Ich bin ein Popup-Fenster!</h1></div>
<input type="text" name="pos" id="pos" value="" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>1</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>2</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p><div class="pop">Einblenden</div></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>3</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p><div class="pop">Einblenden</div></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>4</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p><div class="pop">Einblenden</div></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>5</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p><div class="pop">Einblenden</div></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p>6</p>
<input type="submit" name="sub" value="Reload" />
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
<p>-----------</p>
<p></p>
</form>

DrBonsai · 9. November 2013

Danke für die hilfreichen Antworten.

@tombe:
Das mit dem Popup meinte ich nicht so, dass es dort eingeblendet wird, wo die Seite zuletzt hingescrollt wurde, sondern dass innerhalb meines Popups, das auch einen Scrollbalken aufweist, nach dem Absenden des Formulars wieder an die alte Stelle gescrollt wird.

Dein Beitrag hat mich aber auf die richtige Spur gebracht.

Den Code zum Speichern der aktuellen Scrollposition habe ich quasi von dir übernommen.

HTML:

<script type="text/javascript">
	$("#popup").scroll(function() {
	// aktuelle Position in Textfeld schreiben
        $("#scroll_position_popup").val($("#popup").scrollTop());
    });
</script>
<input type="hidden" readonly="readonly" id="scroll_position_popup" name="scroll_position_popup" />

Am Ende meines div id = "popup" binde ich dann einfach den Code ein, um an diese Stelle zu scrollen, wenn das Feld gesendet wurde.

PHP:

/*zu vorheriger Scrollposition gehen*/
if(isset($scroll_position_popup))
	{
	echo "
	<script type='text/javascript'>
		document.getElementById('popup').scrollTop = ".$scroll_position_popup."
	</script> ";
	}

Problem gelöst. Klappt wunderbar auch im IE.

mfg,
David

Div und body scrollposition in Textfeld schreiben => IE

DrBonsai

Mitglied

Quaese

Moderator

tombe

Erfahrenes Mitglied

DrBonsai

Mitglied

Neue Beiträge