Seite 1 von 2
#1 Scrollen in langen Texten, Beiträgen und im gesamten Forum von Wolfgang 04.06.2007 02:06

avatar

Verweis und Ziel-Anker setzen!
 Aktualisiert 15.09.17




Was sind Ankerpunkte?
  • Ankerpunkte, engl. bookmarks (= Bucheinmerker, Seitenhalter) sind markierte Stellen innerhalb eines Textes oder Beitrages, die mit einem Verweis direkt angesteuert werden können.
  • Der Benutzer erreicht diese Stellen im Text bequem per Mausklick auf einen verweisenden Link, ohne lange und umständlich scrollen zu müssen.
  • Stellen im Text, die als Ankerpunkt funktionieren sollen, werden mit einer Marke definiert!
  • Damit alle Ankerstellen eindeutig erkannt werden, sollte jeder Name (z.B. "marke_01") nur einmal vergeben werden!

<a name="marke_01"></a>


Wie wird ein Verweis gesetzt?
  • Alle Verweise zum Anker haben einen einheitlichen Aufbau (HTML), egal ob sie zu einem Verweisziel in der gleichen Datei oder zu einer beliebigen Web-Adresse führen!
  • Klickt man nun auf den Link am Anfang des Dokuments (Verweis), so wird an die Stelle gesprungen, die zuvor als Ankerstelle definiert worden ist.
  • Eine praktische Sache!

<a href="#marke_01">Verweistext</a>


Ein Verweis in externen Dateien:
  • Es ist möglich auch Links auf Ankerstellen in externen (anderen) Dateien zu setzen. Der Browser zeigt dann die markierte Stelle in der Eingabezeile #marke_01 an.
  • Der Pfadangabe (hier = Seite07.html) muss nur das Gatterzeichen (#) und der Ankername (marke_01) angehängt werden.
  • Alles muss in einem Stück und ohne Leerzeichen geschrieben verwenden!
  • Eine praktische Funktion für den Besucher ist es übrigens, wenn am Ende des Dokuments einen Link steht, der ihn wieder zum Anfang zurückbefördert! Dazu muss natürlich ein Ankerpunkt am Anfang des Dokuments erstellt werden!

<a href="Seite07.html#marke_01"></a>



Noch einige Hilfereiche und lesenswerte Seiten zum Thema "Anker" setzen:
  • Navigation in Beiträgen
  • Sprungmarken und Anker
  • HTML Anker als Sprungmarke setzen




     

     Wolfgang



#2 Scrollen zum Seitenanfang und zum Seitenende von Wolfgang 28.05.2013 21:44

avatar

Scrollen zum Seitenanfang und zum Seitenende
Aktualisiert 17.02.19



Bei der folgenden Version wird das Springen zum Seitenanfang und zum Seitenende über Navigations-Pfeile ausgelöst, die fest im oberen Drittel der linken oder rechten Seite platziert sind!
Zusätzlich sind noch 2 Pfeile für Mittenpositionen möglich.
Der Vorteil liegt darin, dass die Auslösepfeile beim Scrollen mitwandern, nicht aus dem Sichtfeld verschwinden und immer erreichbar sind.
  • Wichtig ist, dass das Forum einen Rand aufweist, damit hier die Pfeile Platz haben.
  • Der Rand kann über die Breite des Forums bestimmt werden. Ein guter Wert liegt bei 95-98%!
  • Das gesamte Script kommt in die Kopfzeile, wodurch ein Eingriff ins Template vermieden wird!


  • Über die Top-Werte in Zeile 1-4 werden die Scroll-Positionen festgelegt!
  • Über "top" und "right" in Zeile 7, 9, 11+13 wird die Position der Pfeile bestimmt (hier rechts). Es hat sich gezeigt, dass die Eintragung für jedes Icon notwendig ist, um Darstellungsproblemen im "Google Chrome-Browser" vorzubeugen.
  • Mit "width" lassen sich die Icons in ihrer Größe anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<a name="anfang" style="position:absolute;top:-500px;">&nbsp;</a>
<a name="mitte1" style="position:absolute;top:300px">&nbsp;</a>
<a name="mitte2" style="position:absolute;top:700px">&nbsp;</a>
<a name="ende" style="position:absolute;top:10000px"></a>
 
<div style="position:absolute;top:0px;">
<a href="#anfang"><img style="position:fixed; top:210px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="25px" title="Zum Seitenanfang"></a>
<br>
<a href="#mitte1"><img style="position:fixed; top:240px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="17px" title="Zur Seitenmitte 1"></a>
<br>
<a href="#mitte2"><img style="position:fixed; top:260px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="17px" title="Zur Seitenmitte 2"></a>
<br>
<a href="#ende"><img style="position:fixed; top:282px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="25px" title="Zum Seitenende"></a>
</div>
 




  • Über die Top-Werte in Zeile 1-4 werden die Scroll-Positionen festgelegt!
  • Über "top" und "right" in Zeile 7, 9, 11+13 wird die Position der Pfeile auf der rechten Seite bestimmt.
  • Über "top" und "left" in Zeile 15, 17, 19+21 wird die Position der Pfeile auf der linken Seite bestimmt.
  • Mit "width" lassen sich die Icons in ihrer Größe anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<a name="anfang" style="position:absolute;top:-500px;">&nbsp;</a>
<a name="mitte1" style="position:absolute;top:300px">&nbsp;</a>
<a name="mitte2" style="position:absolute;top:700px">&nbsp;</a>
<a name="ende" style="position:absolute;top:10000px"></a>

<div style="position:absolute;top:0px;">
<a href="#anfang"><img style="position:fixed; top:210px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="25px" title="Zum Seitenanfang"></a>
<br>
<a href="#mitte1"><img style="position:fixed; top:240px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="17px" title="Zur Seitenmitte 1"></a>
<br>
<a href="#mitte2"><img style="position:fixed; top:260px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="17px" title="Zur Seitenmitte 2"></a>
<br>
<a href="#ende"><img style="position:fixed; top:282px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="25px" title="Zum Seitenende"></a>

<a href="#anfang"><img style="position:fixed; top:210px; left:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="25px" title="Zum Seitenanfang"></a>
<br>
<a href="#mitte1"><img style="position:fixed; top:240px; left:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="17px" title="Zur Seitenmitte 1"></a>
<br>
<a href="#mitte2"><img style="position:fixed; top:260px; left:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="17px" title="Zur Seitenmitte 2"></a>
<br>
<a href="#ende"><img style="position:fixed; top:282px; left:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="25px" title="Zum Seitenende"></a>
</div>
 
 




Mögliche Icons:

https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png

https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png








Hilfreiche Link:
Grafiken, Zeichen und Formen in Word 2007/2010 erstellen und ohne Hintergrund abspeichern





Und gutes Gelingen

Wolfgang

#3 Scrollen zum Seitenanfang und zum Seitenende mit Mouseover-Effekt von Wolfgang 25.06.2013 19:40

avatar

Scrollen zum Seitenanfang und zum Seitenende mit Mouseover-Effekt



Transparente Navigationspfeile
  • Eine weitere Möglichkeit währe die Pfeile bei Inaktivität transparent (eingegraut) darzustellen.
  • Man benötigt zudem nur die Pfeilgrafik, die im aktiven Zustand angezeigt werden soll.
  • Das gesamte Script kommt in die Kopfzeile, wodurch ein Eingriff ins Template vermieden wird!


  • Unter "trans" (Zeile 2) kann der Grad der "Eingrauung" bestimmt werden. Es ist darauf zu achten, dass die Werte für "opacity" + "filter" im gleichen Verhältnis geändert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<style type="text/css">
.trans {
opacity:0.4;
filter:alpha(opacity=40);
}
.trans:hover {
opacity:1.0;
filter:alpha(opacity=100);
}
</style>
 
<a name="anfang" style="position:absolute;top:-500px;">&nbsp;</a>
<a name="mitte1" style="position:absolute;top:300px">&nbsp;</a>
<a name="mitte2" style="position:absolute;top:700px">&nbsp;</a>
<a name="ende" style="position:absolute;top:10000px"></a>

<div style="position:absolute;top:0px;">
<a href="#anfang"><img class="trans" style="position:fixed; top:210px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="25px" title="Zum Seitenanfang"></a>
<br>
<a href="#mitte1"><img class="trans" style="position:fixed; top:240px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="17px" title="Zur Seitenmitte 1"></a>
<br>
<a href="#mitte2"><img class="trans" style="position:fixed; top:260px; right:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="17px" title="Zur Seitenmitte 2"></a>
<br>
<a href="#ende"><img class="trans" style="position:fixed; top:282px; right:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="25px" title="Zum Seitenende"></a>

<a href="#anfang"><img class="trans" style="position:fixed; top:210px; left:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="25px" title="Zum Seitenanfang"></a>
<br>
<a href="#mitte1"><img class="trans" style="position:fixed; top:240px; left:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" border="0" width="17px" title="Zur Seitenmitte 1"></a>
<br>
<a href="#mitte2"><img class="trans" style="position:fixed; top:260px; left:10px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="17px" title="Zur Seitenmitte 2"></a>
<br>
<a href="#ende"><img class="trans" style="position:fixed; top:282px; left:6px; z-index:1000;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" border="0" width="25px" title="Zum Seitenende"></a>
</div>
 
 








Und viel Erfolg

Wolfgang

#4 Scroll-Navigation XXL von Wolfgang 19.09.2017 18:50

avatar

Scroll-Navigation XXL
Aktualisiert 15.12.21





Die folgende Scroll-Navigation baut auf das Plugin "Pfeile Up Down" von TripleM / Mario 4370 auf, hat 6 neue Funktionen und kann in die [tipp]Kopfzeile[info2] Admin > Layout > Kopf- & Fußzeile[/tipp] eingebaut werden!

Das Template wird somit nicht verändert!

Das Script hat folgende zusätzliche und nützliche Funktionen:
  • Funktioniert problemlos auch im Portal (z.Z. allerdings nicht als Plugin)!
  • Die Navigationspfeile sind mit einem Transparent-Effekt ausgestattet!
  • Die Navigationspfeile werden komplett ausgeblendet, wenn die Seite in ihrer Höhe zu gering ist und die Pfeile nicht gebraucht werden! Wie z.B. im "Login"!
  • Die Navigationspfeile werden ebenfalls ausgeblendet, wenn die Breite der Seite ein Maß unterschreitet und die Pfeile in den Beitrag rücken (Minimierung Fenster)!
  • Die mittleren Navigationspfeile werden ausgeblendet, wenn ein schrittweises scrollen nicht benötigt wird! Wie z.B. im "Kalender"!
  • Das schrittweise Scrollen wird für kleine Monitore automatisch angepasst!
  • Die Tooltipps werden nicht mehr angezeigt, weil sie bei der Navigation stören!

Das Script wird in die Kopfzeile eingebaut.

  • In Zeile 3 wird die Höhe (hier 170px) und der Abstand zum linken Rand (hier 5px) eingestellt!
  • In Zeile 5 wird der Abstand zum rechten Rand eingestellt (hier 5px)!
  • In Zeile 6 kann die Intensität des Transparent-Effekt angepasst werden!
  • In Zeile 35+45 kann die Schrittweite für kleine und in Zeile 37+47 für größere Monitore eingestellt werden!
  • In Zeile 86-89 können die Pfeilgrafiken angepasst werden!
  • Wird die rechte Scroll-Navigation nicht benötigt, Zeile 5,16-18 löschen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<style type="text/css">
/* Scoll-Button / Pfeile */
.scroll-buttons {top: 170px;left: 5px;position: fixed;z-index: 99;}
.scroll-buttons img {cursor: pointer;border: 0;display: block;margin: 0 auto;padding: 4px;}
.scroll-buttons.right {right: 5px;left: auto;}
.trans {opacity:0.5;filter:alpha(opacity=50);}
.trans:hover {opacity:1.0;filter:alpha(opacity=100);}
</style>
 
<script language="JavaScript">
/* Scoll-Button */
$(document).ready(function(){
var buttonTemplate = $('.scroll-buttons');
buttonTemplate.addClass('show');
 
/* Duplizierung rechte Seite */
var copyRight = buttonTemplate.clone().addClass('show right');
buttonTemplate.after(copyRight);
 
function scrollToPosition(position) {
$('html, body').stop().animate({
scrollTop: position
}, 'slow');
}
 
$('.scroll-buttons').on('click', 'img', function(){
switch($(this).index()) {
case 0:
scrollToPosition(0);
break;
case 1:
 
/* Schrittweises scrollen nach oben */
if (($(window).height()) < 900){
scrollToPosition($(document).scrollTop() - 300);
} else {
scrollToPosition($(document).scrollTop() - 600);
}
 
break;
case 2:
 
/* Schrittweises scrollen nach unten */
if (($(window).height()) < 900){
scrollToPosition($(document).scrollTop() + 300);
} else {
scrollToPosition($(document).scrollTop() + 600);
}
 
break;
case 3:
scrollToPosition($(document).height() - $(window).height());
break;
}
});
 
$(document).removeAttr("height");
var documentHeight = $(document).height();
 
/* Mittlere Buttons ausblenden - schrittweises scrollen */
if ((documentHeight) < 1500){
$('.scroll-position').css('display','none');
}
 
/* Scroll-Buttons bei zu kleiner Webseitenhöhe ausblenden */
if ((documentHeight) < 1000){
$('.scroll-buttons').css('display','none');
};
 
/* Scroll-Buttons bei zu kleiner Webseiterbreite ausblenden */
$( window ).resize(function() {
$(document).removeAttr("width");
var documentWidth = $(document).width();
if ((documentWidth) < 1000){
$('.scroll-buttons').css('display','none');
}else {
$('.scroll-buttons').css('display','');
}
});
 
});
</script>
 
<!-- Pfeile / Scroll-Buttons -->
<div class="scroll-buttons">
<img class="trans" src="//files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" width="25px" alt="Zum Seitenanfang">
<img class="trans scroll-position" src="//files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png" width="15px" alt="Schritt hoch">
<img class="trans scroll-position" src="//files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" width="15px" alt="Schritt runter">
<img class="trans" src="//files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png" width="25px" alt="Zum Seitenende">
</div>
 




Erweiterung des Plugins "Pfeile Up Down":
Wer nicht das komplette Script in die Kopfzeile setzen will, kann auch das Plugin "Pfeile Up Down" wie folgt erweitern!

  • Hier fällt allerdings die automatische Anpassung an kleinere Monitore oder Tabletts für schrittweises Scrollen weg!


Die Plugin-Erweiterung wird in die Kopfzeile eingebaut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<style type="text/css">
/* Scoll-Button / Pfeile */
.scroll-buttons img {opacity:0.5;filter:alpha(opacity=50);}
.scroll-buttons img:hover {opacity:1.0;filter:alpha(opacity=100);}
</style>
 
<script language="JavaScript">
/* Scroll-Button - Pfeile bei kleinen Dokumenten ausblenden */
$(document).ready(function(){
$(document).removeAttr("height");
var documentHeight = $(document).height();
 
/* Mittlere Buttons ausblenden - schrittweises scrollen */
if ((documentHeight) < 1500){
$('.scroll-buttons img:nth-child(2), .scroll-buttons img:nth-child(3) ').css('display','none');
}
 
/* Scroll-Buttons bei zu kleiner Webseitenhöhe ausblenden */
if ((documentHeight) < 1000){
$('.scroll-buttons').css('display','none');
};
 
$( window ).resize(function() {
/* Ausblenden bei Minimierung Fenster */
$(document).removeAttr("width");
var documentWidth = $(document).width();
 
/* Scroll-Buttons bei zu kleiner Webseiterbreite ausblenden */
if ((documentWidth) < 1000){
$('.scroll-buttons').css('display','none');
}else {
$('.scroll-buttons').css('display','');
}
 
});
});
</script>
 








Bis dann und gutes Gelingen!

Wolfgang

#5 Scroll-Navigation XXL im Portal von Wolfgang 20.09.2017 18:51

avatar

Scroll-Navigation XXL im Portal



So wie es aussieht werden alle Funktionen nur wirksam, wenn das gesamte Skript in der Kopfzeile steht!

Hier eine Lösung zum Portal:

1
 
$('.portal .topnavigation_wrap a#open-help-link').prepend('<style> #open-help-link {display: none;} </style>').addClass('scroll-buttons');
 







Wolfgang

Xobor Forum Software von Xobor