[GELÖST] Per Buttom Anweisung zuerst nach oben scrollen dann erst neue Seite laden.

annamartina · 14. Juli 2014

Hallo,

ich führe in einer .htm Seite verschiedene Buttons die verschiedene Seiten laden und dann die aktuelle mit der zu ladenden Seite ersetzen ( target="_self") sollen.

Gerne würde ich aber die Anweisung für die einzelnen Buttons so umschreiben, dass zuerst immer ganz nach oben geskrollt wird, indem vorab das beinhaltete smooth scrolling script ausgeführt und dann erst bei eingenommener Topposition die aktuelle Seite mit der zu ladenden Seite ersetzt wird.

Kann mir vielleicht jemand helfen, oder mir die hier dargestellte muster.htm Seite funktionsfähig ergänzen ( ich kenne mich kaum aus mit Javaskript ).

Danke im Voraus, Anna.

N.S. Die zu ladenden Seiten müssten zur Not aber auch erreichbar sein, falls im Browser die Funktion Javaskript ausgeschaltet ist.

HTML:

<!DOCTYPE html>
</script>
<!--[if lt IE 8]><html lang="de" class="no-js ie7 oldie"><![endif]-->
<!--[if IE 8]><html lang="de" class="no-js ie8 oldie"><![endif]-->
<!--[if IE 9]><html lang="de" class="no-js ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="de" class="no-js"> <!--<![endif]-->
<!-- saved from url=(0014)about:internet -->
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />

<title>muster</title>

<!-- *********** skript für smooth scrolling anfang *********** -->

  <script type="text/javascript"></script>
	<script>
var ss = {
    fixAllLinks: function () {
        var allLinks = document.getElementsByTagName('a');
        for (var i = 0; i < allLinks.length; i++) {
            var lnk = allLinks[i];
            if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
                ss.addEvent(lnk, 'click', ss.smoothScroll);
            }
        }
    },
    smoothScroll: function (e) {
        if (window.event) {
            target = window.event.srcElement;
        } else if (e) {
            target = e.target;
        } else return;
        if (target.nodeName.toLowerCase() != 'a') {
            target = target.parentNode;
        }
        if (target.nodeName.toLowerCase() != 'a') return;
        anchor = target.hash.substr(1);
        var allLinks = document.getElementsByTagName('a');
        var destinationLink = null;
        for (var i = 0; i < allLinks.length; i++) {
            var lnk = allLinks[i];
            if (lnk.name && (lnk.name == anchor)) {
                destinationLink = lnk;
                break;
            }
        }
        if (!destinationLink) destinationLink = document.getElementById(anchor);
        if (!destinationLink) return true;
        var destx = destinationLink.offsetLeft;
        var desty = destinationLink.offsetTop;
        var thisNode = destinationLink;
        while (thisNode.offsetParent && (thisNode.offsetParent != document.body)) {
            thisNode = thisNode.offsetParent;
            destx += thisNode.offsetLeft;
            desty += thisNode.offsetTop;
        }
        clearInterval(ss.INTERVAL);
        cypos = ss.getCurrentYPos();
        ss_stepsize = parseInt((desty - cypos) / ss.STEPS);
        ss.INTERVAL = setInterval('ss.scrollWindow(' + ss_stepsize + ',' + desty + ',"' + anchor + '")', 10);
        if (window.event) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.preventDefault && e.stopPropagation) {
            e.preventDefault();
            e.stopPropagation();
        }
    },
    scrollWindow: function (scramount, dest, anchor) {
        wascypos = ss.getCurrentYPos();
        isAbove = (wascypos < dest);
        window.scrollTo(0, wascypos + scramount);
        iscypos = ss.getCurrentYPos();
        isAboveNow = (iscypos < dest);
        if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
            window.scrollTo(0, dest);
            clearInterval(ss.INTERVAL);
            location.hash = anchor;
        }
    },
    getCurrentYPos: function () {
        if (document.body && document.body.scrollTop) return document.body.scrollTop;
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
        if (window.pageYOffset) return window.pageYOffset;
        return 0;
    },
    addEvent: function (elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent) {
            var r = elm.attachEvent("on" + evType, fn);
            return r;
        } else {
            alert("Handler could not be removed");
        }
    }
}
ss.STEPS = 38;
ss.addEvent(window, "load", ss.fixAllLinks);
</script>
  
   <!-- *********** skript für smooth scrolling ende *********** -->
   
   
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
</style>
</head>

<body>

<div align="center">
	<a name="TOP"></a><a name="top_a"></a><a name="top_b"></a><a name="top_c"></a><a name="top_d"></a>
<table cellpadding="0" cellspacing="0" width="582" height="1197">
		<!-- MSTableType="layout" -->
	  <tr>
			<td height="516" style="border: 1px solid #D2737A" bgcolor="#D2737A" colspan="4"> 
			</td>
	  	</tr>
		<tr>
			<td height="30" style="border-left:1px solid #D2737A; border-right:1px solid #D2737A; line-height:100%; font-size:10pt; font-family:Arial; padding-bottom:4px" align="center" width="145">
			<font color="#333333"><a href="#top_a">scrolle erst zu top_a<br>
			dann lade seite_a</a></font></td>
			<td height="30" style="border-left:1px solid #D2737A; border-right:1px solid #D2737A; line-height:100%; font-size:10pt; font-family:Arial; padding-bottom:4px" align="center" width="145">
			<font color="#333333"><a href="#top_b">scrolle erst zu top_b<br>
			dann lade seite_b</a></font></td>
			<td height="30" style="border-left:1px solid #D2737A; border-right:1px solid #D2737A; line-height:100%; font-size:10pt; font-family:Arial; padding-bottom:4px" align="center" width="146">
			<font color="#333333"><a href="#top_c">scrolle erst zu top_c<br>
			dann lade seite_c</a></font></td>
			<td height="30" style="border-left:1px solid #D2737A; border-right:1px solid #D2737A; line-height:100%; font-size:10pt; font-family:Arial; padding-bottom:4px" align="center" width="146">
			<font color="#333333"><a href="#top_d">scrolle erst zu top_d<br>
			dann lade seite_d</a></font></td>
	  	</tr>
		<tr>
			<td height="621" style="padding:10px; border:1px solid #D2737A; font-size:12pt; font-family:Arial; line-height:110%" align="center" valign="top" colspan="4">
			<p align="justify"><font color="#333333"><br>
			Hallo,<br>
			<br>
			ich führe in einer .htm Seite verschiedene Buttons die verschiedene 
			Seiten laden und die aktuelle mit der zu ladenden Seite ersetzen 
			( target="_self") sollen.<br>
			<br>
			Gerne würde ich aber die Anweisung für die einzelnen Buttons so 
			umschreiben, dass zuerst immer ganz nach oben geskrollt wird, indem 
			vorab das beinhaltete smooth scrolling script ausgeführt und dann erst bei eingenommener 
			Topposition die aktuelle Seite mit der zu ladenden Seite ersetzt 
			wird.<br>
			<br>
			Kann mir vielleicht jemand helfen, oder mir die hier dargestellte 
			muster.htm Seite funktionsfähig ergänzen ( ich kenne mich kaum aus 
			mit Javaskript ).<br>
			<br>
 Danke im Voraus, Anna.<br>
			<br>
			N.S. Die zu ladenden Seiten müssten zur Not aber auch erreichbar 
			sein, falls im Browser die Funktion Javaskript ausgeschaltet ist.<br>
			<br>
 </font></td>
	  	</tr>
		<tr>
			<td height="30" style="border-bottom:1px solid #D2737A; border-left:1px solid #D2737A; border-right:1px solid #D2737A; line-height:100%; font-size:10pt; font-family:Arial; padding-bottom:4px" align="center" width="698" colspan="4">
			<font color="#333333"><a href="#TOP">TOP</a></font></td>
	  	</tr>
  </table>
</div>

</body>

</html>
<p align="center"><a name="UNT"></a></p>

kkapsner · 14. Juli 2014

Wo hast du denn dieses Skript her? Wirklich gut geschrieben ist das ja nicht...

Aber zu deinem Problem: Du musst in der fixAllLinks einen else-Zweig einfügen, der dir alle anderen Links behandelt. Dabei musst du auf diesen Links einen onclick-Eventlistener registrieren, der die eine modifizierte Version von scrollWindow im Interval ausführt (so ähnlich wie im smoothScroll). Dieses muss dann einfach nach oben scrollen und wenn es fertig ist, muss es location.href auf die URL der neuen Seite setzen.

annamartina · 15. Juli 2014

Hallo kkapsner

danke für Deine Antwort ....

Wo hast du denn dieses Skript her? Wirklich gut geschrieben ist das ja nicht...

ich habe es aus einem Blog kopiert und ich werde es auch nicht verwenden ( versuche gerne andere Lösung ) aber das Prinzip meiner Frage bleibt wohl erhalten, oder ich müsste sie etwas umformulieren.

Dabei musst du auf diesen Links einen onclick-Eventlistener registrieren, der die eine modifizierte Version von scrollWindow im Interval ausführt

Falls iich Dich richtig verstehe habe ich dies so gelöst ( inklusive jquery.1.8.3.js)

Code:

jQuery(function($) {
		// skrolle nach oben on click
				$('#top_a a').click(function() {
			$('body,html').stop().animate({
				scrollTop: 0
			}, 800);
			return false;
		});
				$('#top_b a').click(function() {
			$('body,html').stop().animate({
				scrollTop: 0
			}, 800);
			return false;
		});
				$('#top_c a').click(function() {
			$('body,html').stop().animate({
				scrollTop: 0
			}, 800);
			return false;
		});
				$('#top_d a').click(function() {
			$('body,html').stop().animate({
				scrollTop: 0
			}, 800);
			return false;
		});	
	});
});

Dies funktioniert soweit gut, ... aber das mit

Du musst in der fixAllLinks einen else-Zweig einfügen

und

Dieses muss dann einfach nach oben scrollen und wenn es fertig ist, muss es location.href auf die URL der neuen Seite setzen.

weiss ich nicht wie das geht.

Eigentlich müsste doch registriert werden von welchem Link (Button) aus die TopPosition angesteuert und dann erreicht wurde um dann die aktuelle mit der bestimmten, zu ladenden Seite zu ersetzen?

Daführ brauche ich wohl den in der fixAllLinks einen else-Zweig ... muss es location.href auf die URL der neuen Seite setzen.

Aber ab hier kenne ich mich gar nicht aus, dies ist zu schwierig für mich, um es umsetzen zu können. Könntest Du mir vielleicht weiterhelfen und das fehlende Script ausschreiben?

miniA4kuser · 15. Juli 2014

annamartina schrieb:
Falls iich Dich richtig verstehe habe ich dies so gelöst ( inklusive jquery.1.8.3.js)

Ich würde dir raten die aktuelle jQuery-Version zu nutzen. Diese ist mittlerweile die Version 1.11.1

Der Amsatz ist ja schon einmal getan. Ich frage mich nur, wo du die URL's der zu ladenden Seiten hinterlegst? Was meinst du denn genau mit Link (Button)?

annamartina · 15. Juli 2014

Hallo miniA4kuser,

Ich würde dir raten die aktuelle jQuery-Version zu nutzen. Diese ist mittlerweile die Version 1.11.1

.. ok :icon7:

Der Amsatz ist ja schon einmal getan. Ich frage mich nur, wo du die URL's der zu ladenden Seiten hinterlegst? Was meinst du denn genau mit Link (Button)?

Also mit Button meine ich einen Text oder eventuell ein kleines Bild über das ich im Normalfall durch einen Link die aktuelle Seite mit der zu ladenden Seite ersetze. Der verwendete Cod sähe dann so aus:

HTML:

<div id="top_a"><font color="#333"><a href="#top_a">scrolle erst zu top_a<br>dann lade seite_a</a></div></font></td>

Das mit der Hinterlegung der URL's der zu ladenden Seiten weiss ich eben auch nicht ....?
Wäre es nicht möglich über die eruierte div id="", also zum Beispiel:

durch die div id="top_a" wurde Top eingenommen ersetze nun die aktuelle Seite mit seite_a
oder durch die div id="top_b" wurde Top eingenommen ersetze nun die aktuelle Seite mit seite_b

miniA4kuser · 15. Juli 2014

HTML:

<div id="top_a"><font color="#333"><a href="#top_a">scrolle erst zu top_a<br>dann lade seite_a</a></div></font></td>

Ist denn in diesem div auch noch etwas anderes wie nur der a-Link?

annamartina schrieb:
durch die div id="top_a" wurde Top eingenommen ersetze nun die aktuelle Seite mit seite_a
oder durch die div id="top_b" wurde Top eingenommen ersetze nun die aktuelle Seite mit seite_b

Das könnte man machen. Heißt denn die Seite denn auch dann seite_a?
Befindet sich diese seite_a dann auch auf der selben Ebene (Pfad) wie die momentane Seite?

annamartina · 15. Juli 2014

@ miniA4kuser

Ist denn in diesem div auch noch etwas anderes wie nur der a-Link?

... im Moment liegt in diesem div nur der a-Link, aber das habe ich nur für mich so gehalten damit ich das Prinzip verstehen lernen kann ( später kommen dann noch andere Dinge in den div )

Heißt denn die Seite denn auch dann seite_a?
Befindet sich diese seite_a dann auch auf der selben Ebene (Pfad) wie die momentane Seite?

... ja die Seite heisst seite_a und befindet sich auch auf der selben Ebene.

miniA4kuser · 15. Juli 2014

Dann könntest du ja mit dem data-Attribut arbeiten. Ausserdem würde ich empfehlen dieser Art von Links eine Klasse zu geben. Damit kannst du diese dann leichter ansprechen:

HTML:

<div id="top_a"><font color="#333"><a class="scollLink" href="#top_a" data-url="seite_a">scrolle erst zu top_a<br>dann lade seite_a</a></div></font></td>

Und das jQuery-Script dazu ungefähr so:

Code:

$(document).ready(function () {
	$('.scollLink').on('click', function (event) {
		var url = location.href.substr(0, location.href.lastIndexOf('/') + 1) + $(this).data('url');

		event.preventDefault();
		$('body,html').stop().animate({
			scrollTop: 0
		}, 800, function () {
			location.href = url;
		});
	});
});

annamartina · 16. Juli 2014

danke miniA4kuser,
diese Lösung ist genial, es funktioniert genauso wie ich mir das vorgestellt habe und so gelöst funktioniert das Laden der neuen Seite auch wenn Javascript im Browser deaktiviert ist.

Ich freue mich sehr darüber, dass es funktioniert und ich möchte mich recht herzlich bei dir bedanken, dass du mir dein Wissen zur Verfügung gestellt hast,

danke, Gruß Anna.

kkapsner · 17. Juli 2014

Ich verstehe den kompletten Ansatz mit dem #top_a nicht wirklich. Im letzten Code wird doch immer ganz nach oben gescrollt. Dann kann man die neue URL doch auch gleich ins href schreiben:

Code:

<a class="scollLink" href="seite_a">scrolle erst zum Anfang<br>dann lade seite_a</a>

Code:

$(document).ready(function () {
	$('.scollLink').on('click', function (event) {
		var url = this.href;

		event.preventDefault();
		$('body,html').stop().animate({
			scrollTop: 0
		}, 800, function () {
			location.href = url;
		});
	});
});

Oder verwendest du einen anderen Code? Denn

annamartina schrieb:
so gelöst funktioniert das Laden der neuen Seite auch wenn Javascript im Browser deaktiviert ist.

ist mit dem letzten Code von miniA4kuser nicht gegeben...

PS: Das <font> würde ich ja nicht mehr benutzen - dafür gibt es CSS...

miniA4kuser · 17. Juli 2014

kkapsner schrieb:
Ich verstehe den kompletten Ansatz mit dem #top_a nicht wirklich.

Ich habs auch nicht so ganz geschnallt, habs aber jetz dabei belassen...

annamartina · 21. Juli 2014

@ kkapsner

Oder verwendest du einen anderen Code? Denn "so gelöst funktioniert das Laden der neuen Seite auch wenn Javascript im Browser deaktiviert ist." ist mit dem letzten Code von miniA4kuser nicht gegeben...

... also ich habs so gelöst

HTML:

<div ><a class="scollLink" href="seite_a.htm" data-url="seite_a.htm">scrolle erst zu top dann lade seite_a</a>

mit dem script von miniA4kuser

PHP:

$(document).ready(function () {
	$('.scollLink').on('click', function (event) {
		var url = location.href.substr(0, location.href.lastIndexOf('/') + 1) + $(this).data('url');

		event.preventDefault();
		$('body,html').stop().animate({
			scrollTop: 0
		}, 800, function () {
			location.href = url;
		});
	});
});;

... und dann funktioniert es auch wenn im Browser Javascript deaktiviert ist ... es wird zwar nicht nach oben gescrollt aber die Seite wird dennoch geladen (oder übersehe ich da etwas?) ich glaube der Fehler lag in meinem Posting von <a href="#top_a"> anstatt <a href="seite_a.htm"> laut Hinweis

Dann kann man die neue URL doch auch gleich ins href schreiben:

und

PS: Das <font> würde ich ja nicht mehr benutzen - dafür gibt es CSS...

ok ... danke :icon7:.

annamartina · 22. Juli 2014

Ich hätte noch eine erweiterte Frage zum Thema das eigentlich schon gelöst ist (ich weiss nicht ob es angebracht ist, hier an dieser Selle noch eine Frage zu dem Script zu stellen ... oder ob ich die Frage im Forum neu posten soll?):
Ein kleines Manko das durch das Script

PHP:

$(document).ready(function () {
	$('.scollLink').on('click', function (event) {
		var url = location.href.substr(0, location.href.lastIndexOf('/') + 1) + $(this).data('url');
		event.preventDefault();
		$('body,html').stop().animate({
			scrollTop: 0
		}, 800, function () {
			location.href = url;
		});
	});
});;

entsteht ist folgendes :
Besteht die Seitenposition Top oder Ist die Seitenposition Top erreicht, dann entsteht bei oder nach der Nutzung des scollLink's, eine kurze zeitliche Verzögerung, bis die neue Seite geladen wird. Ich kann die Zeit zwar mit einem Ladehinweis überbrücken, aber meine Frage ist, ob es nicht vielleicht eine elegantere Lösung dafür gäbe?
Danke Gruss Anna.

miniA4kuser · 22. Juli 2014

Wie du meinen?
Die Verzögerung entsteht, wenn eigentlich nicht gescrollt werden muss?

annamartina · 22. Juli 2014

... also angenommen die Seitenposition Top besteht, (es wurde nicht, oder wieder nach ganz oben gescrollt) und ich benutze den scollLink, dann entsteht eine kurze zeitliche Verzögerung bis die aktuelle Seite mit der neuen Seite ersetzt wird.
Und die selbe Verzögerung entsteht, wenn zum Beispiel die Seitenposition in der (scrollbaren) Mitte besteht und ich benutze den scollLink dann wird wie vorgesehen nach oben gescrollt, Top ist erreicht und jetzt geschieht ein kurzer moment lang nichts ...

miniA4kuser · 22. Juli 2014

annamartina schrieb:
... bis die aktuelle Seite mit der neuen Seite ersetzt wird.
... jetzt geschieht ein kurzer moment lang nichts ...

Was meinst du denn genau damit? Fängt der Browser nicht an zu laden (Ladesymbol macht nichts) oder meinst du das die alte Seite zu lange angezeigt wird? Letzteres is klar, denn es muss ja erst einmal etwas geladen werden...

Hast du mal eine Testseite wo man sich das anschauen kann?

Ansonsten mal ein Schuß ins blaue (ungetestet):

Code:

$(document).ready(function () {
	$('.scollLink').on('click', function (event) {
		var url = location.href.substr(0, location.href.lastIndexOf('/') + 1) + $(this).data('url'),
			view = $(window).scrollTop() === $('body').scrollTop() ? 'body' : 'html';

		event.preventDefault();
		if ($(window).scrollTop() > 0) {
			$(view).stop().animate({
				scrollTop: 0
			}, 800, function () {
				location.href = url;
			});
		} else {
				location.href = url;
		}
	});
});

annamartina · 22. Juli 2014

miniA4kuser schrieb:
.... Fängt der Browser nicht an zu laden (Ladesymbol macht nichts)?
...oder meinst du das die alte Seite zu lange angezeigt wird?

... ich glaube eher dass der Browser nicht anfängt zu laden ... denn verwende ich einen normalen Link, dann wird die Seite gleich ersetzt, verwende ich aber den scollLink dauert es einen kurzen Moment (immer im Verhältnis 800, function, verringere ich die Zahl 800 verringert sich auch die Zeitsequenz der Lade-Verzögerung).
Aber ich würde gerne dein neues Script Zuhause ausprobieren und für eine Testseite müsste ich eine Zipdatei Erstellen ... ich melde mich morgen, danke vorerst,
Gruss Anna.

annamartina · 23. Juli 2014

also dein

miniA4kuser schrieb:
... Schuß ins blaue

mit der Scripterweiterung

Code:

} else {
location.href = url; }

ist die perfekte Lösung.
Jetzt wird die neue Seite ohne Verzögerung geladen und angezeigt ... einfach perfekt, vielen herzlichen Dank,
Gruss Anna.

miniA4kuser · 24. Juli 2014

Gern geschehn

PS: Du hast aber auch Hoffentlich die Änderung mit dem $(view) gesehen? Dies sollte man anstatt dem $('body,html') verwenden, da sonst der Callback zwei mal gefeuert wird. Auch wenn je nach verwendetem Browser entweder nur der body oder nur das html animiert werden kann, was auch der eigentliche Grund dieser Doppelnotation ist.

kkapsner · 25. Juli 2014

annamartina schrieb:
... also ich habs so gelöst

Ah - dann ist aber das data-url eigentlich unnötig.

miniA4kuser schrieb:
Schuß ins blaue

Ich würde mir ja das else sparen, indem ich das event.preventDefault() in das if mit der Scrollpositionsabfrage reinpacke...

[GELÖST] Per Buttom Anweisung zuerst nach oben scrollen dann erst neue Seite laden.

New member

Super Moderator

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Super Moderator

Lounge-Member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member

Super Moderator