Scrollen in Beiträgen

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Scrollen in Beiträgen

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Scrollen in Beiträgen datum

29.05.2014 14:47 (zuletzt bearbeitet: 17.05.2020 21:59)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3447
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1316

Scrollen in Beiträgen
Aktualisiert 17.05.20

Im Business-Template ist in jedem Beitrag ein kleiner "nach oben springen" - Button enthalten.
Super Idee, nicht so auffällig, nicht aufdringlich und bei großen Beiträgen sehr von Vorteil.
Um die Funktion "nach oben springen" auszulösen, muss man die kleine Grafik treffen.... Nicht so gut!
Erweitert man den Auslösebereich, ist das Problem gelöst!

Mit der folgenden Änderung gibt es noch einen zusätzlichen Button mit der Funktion "nach unten springen".
Außerdem wird der Auslösebereich der beiden kleinen Button vergrößert, damit man sie sicher angeklicken kann.
Hinzu kommt die Möglichkeit einer kleinen Scroll-Animation .

Installation

Suchen und ersetzen:
• Eintragung im Business-Template unter
• Zeile 1-4 suchen und mit den folgenden Zeile 1-17 ersetzen!

1
2
3
4

 nach oben springen <img src="https://files.homepagemodules.de/b2001010/a_275.png" style="vertical-align: middle;" alt="nach oben springen" title="nach oben springen"/> 

Ersetzen mit:
• Zeile 1-8 ist für den 2. Button "nach unten springen" zuständig!
• In Zeile 6 + 15 bestimmt "padding-left:200px" den Auslösebereich der Scroll-Button!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<span class="goto_bottom" style="line-height:10px; padding:10px 20px; cursor:pointer; position:absolute; top:0px; right:0px;">
<span class="goto_bottom_txt" style="display: none; position:absolute; padding:3px 0 0 85px;">
<small>nach unten springen </small>
</span>
<span>
<img src="https://files.homepagemodules.de/b135428/f199t92241p622575n2_lOzSjVZT.png" style="vertical-align: middle; padding-left:200px;" alt="nach unten springen" title="nach unten springen">
</span>
</span>
 
<span class="goto_top" style="line-height:10px; padding:10px 20px; cursor:pointer; position:absolute; bottom:35px; right:0px;">
<span class="goto_top_txt" style="display: none; position:absolute; padding:3px 0 0 85px;">
<small>nach oben springen </small>
</span>
<span>
<img src="https://files.homepagemodules.de/b2001010/a_275.png" style="vertical-align: middle; padding-left:200px;" alt="nach oben springen" title="nach oben springen"/>
</span>
</span> 
 

Schlie�en

Suchen:
• Erweiterung auch im Business-Template unter
• Zeile 1-5 suchen und die folgenden Zeile 1-11 anhängen!

1
2
3
4
5
 
$('.goto_top').hover(function(){
		$(this).parent().find('.goto_top_txt').show();
	}, function(){
		$(this).parent().find('.goto_top_txt').hide();
	});
 

Anhängen:
• Der Wert "3000" in Zeile 3 bestimmt die Zeit für die Scroll-Animatiion!
• Der Wert "20000" in Zeile 3 bestimmt den Scroll-Abstand zum oberen Rand!

1
2
3
4
5
6
7
8
9
10
11
 
$('.goto_bottom').click(function(event) {
		event.preventDefault();
		$( 'html, body' ).animate({ scrollTop: 20000 }, 3000);
		return false;
	});
	
	$('.goto_bottom').hover(function(){
		$(this).parent().find('.goto_bottom_txt').show();
	}, function(){
		$(this).parent().find('.goto_bottom_txt').hide();
	});
 

Schlie�en

Siehe auch hier:

• Gezieltes Springen in langen Texten, Beiträgen und im gesamten Forum
• Aktionsradius des nach oben springen Button vergrössern

Bis dann und gutes Gelingen
Wolfgang

Scannerxy findet das Top!

Antworten

#2 | RE: Scrollen in Beiträgen datum

29.05.2014 15:40

vielen Dank, klappt wunderbar

Wolfgang findet das Top!

Antworten

#3 | RE: Scrollen in Beiträgen datum

29.03.2018 17:55

Hey Wolfgang, vielen Dank!

Ich habs bei mir im Forum auch eben eingebaut. Klappt super.

Antworten

#4 | RE: Scrollen in Beiträgen datum

30.03.2018 11:25

Hans58

Informationen anzeigen

Beitr�ge:	114
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	29

Hallo zusammen,

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
 

<span class="goto_bottom" style="line-height:10px; padding:10px 20px; cursor:pointer;position:absolute;top:0px; right:0px;">
<span class="goto_bottom_txt" style="display: none;position:absolute;padding:3px 0 0 85px;"><small>nach unten springen </small></span>
<span><img src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-27-28dd.png" style="vertical-align: middle;padding-left:250px;" alt="nach unten springen" title="nach unten springen"></span>
</span>
 
<span class="goto_top" style="line-height:10px; padding:10px 20px; cursor:pointer;position:absolute;bottom:35px; right:0px;">
<span class="goto_top_txt" style="display: none;position:absolute;padding:3px 0 0 85px;"><small>nach oben springen </small></span>
<span><img src="https://files.homepagemodules.de/b2001010/a_275.png" style="vertical-align: middle;padding-left:250px;" alt="nach oben springen" title="nach oben springen"/></span>
</span> 
 

$('.goto_bottom').click(function(event) {
event.preventDefault();
$( 'html, body' ).animate({ scrollTop: 20000 }, 3000 );
return false;
});
 
$('.goto_bottom').hover(function(){
$(this).parent().find('.goto_bottom_txt').show();
}, function(){
$(this).parent().find('.goto_bottom_txt').hide();
});
 

 

klappt das auch mit einem Plugin?

habe schon mal über Thread Flat ... Header probiert // klappte leider nicht

Gruß Lud

Antworten

#5 | RE: Scrollen in Beiträgen datum

30.03.2018 18:15 (zuletzt bearbeitet: 30.03.2018 18:16)

mike48

Informationen anzeigen

Beitr�ge:	84
Registriert seit:	06.05.2015

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Krebs
Likes	18

Versuch das mal im Plugin Element Thread - Flat --> footer

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
 
<div style="display:none">
  <span class="goto_bottom" style="line-height:10px; padding:10px 20px; cursor:pointer;position:absolute;bottom:35px; right:0px;">
    <span class="goto_bottom_txt" style="display: none;position:absolute;padding:3px 0 0 85px;"><small>nach unten springen </small></span>
    <span>
      <img src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-27-28dd.png" style="vertical-align: middle;padding-left:200px;" alt="nach unten springen" title="nach unten springen">
    </span>
  </span>
</div>
 
<script>
  $('.goto_bottom').appendTo('.boxcontent');
  $('.goto_top').css({"bottom":"50px"});
  $('.goto_top_txt').css({"position":"absolute", "padding":"3px 0 0 85px"});
  $('.goto_top span img').css({"padding-left":"200px"});
  
  $('.goto_bottom').click(function(event) {
    event.preventDefault();
    $( 'html, body' ).animate({ scrollTop: 20000 }, 3000 );
    return false;
  });
  
  $('.goto_bottom').hover(function(){
    $(this).parent().find('.goto_bottom_txt').show();
  }, function(){
    $(this).parent().find('.goto_bottom_txt').hide();
  });
</script>
 
 

Schlie�en

Scannerxy, Wolfgang und Hans58 finden das Top!

Antworten

#6 | RE: Scrollen in Beiträgen datum

30.03.2018 18:24 (zuletzt bearbeitet: 03.05.2018 23:39)

Hans58

Informationen anzeigen

Beitr�ge:	114
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	29

vielen Dank Mike

------------------

edit

klappt jetzt super .. danke

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
 

<div style="display:none">
 <span class="goto_bottom" style="line-height:10px; padding:10px 20px; cursor:pointer;position:absolute;top:0px; right:0px;">
<span class="goto_bottom_txt" style="display: none;position:absolute;padding:3px 0 0 85px;"><small>nach unten springen </small></span>
<span><img src="https://files.homepagemodules.de/b135428/f199t92241p622575n2_lOzSjVZT.png" style="vertical-align: middle;padding-left:250px;" alt="nach unten springen" title="nach unten springen"></span>
</span>
 </div>
 
<script>
  $('.goto_bottom').appendTo('.boxcontent');
  $('.goto_top').css({"bottom":"50px"});
  $('.goto_top_txt').css({"position":"absolute", "padding":"3px 0 0 85px"});
  $('.goto_top span img').css({"padding-left":"250px"});
  
  $('.goto_bottom').click(function(event) {
    event.preventDefault();
    $( 'html, body' ).animate({ scrollTop: 20000 }, 3000 );
    return false;
  });
  
  $('.goto_bottom').hover(function(){
    $(this).parent().find('.goto_bottom_txt').show();
  }, function(){
    $(this).parent().find('.goto_bottom_txt').hide();
  });
</script>
 
 

Antworten

Spoiler-Veschachtelung mit Code und Pre � � Geheime Sache - Kategorien mit Passwort schützen!

�hnliche Themen

Antworten

Letzter Beitrag

Beitragsshow, Beitragspräsentation für geschriebene Beiträge
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.11.2023 00:49
von

Wolfgang • Zugriffe: 367

Scroll-Funktion / Höhenproblem im Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Kipper-Spedition

18.11.2023 00:46
von

Wolfgang • Zugriffe: 349

EINE NEUE HOFFNUNG FÜR DAS CODIEREN
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 29.08.2022 21:49
ichwersonst • Zugriffe: 364

Upload-Fenster immer automatisch in den Sichtbereich scrollen lassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.05.2020 17:06
von

Wolfgang • Zugriffe: 785

FAQ verbessern und interessanter gestalten - (v4, v6 + Mobil)
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 5 09.07.2023 12:13
Daishi • Zugriffe: 3112

Eigenes Impressum und übersichtliche Datenschutzerklärung für die Webseite
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

10.09.2023 17:51
von

Kipper-Spedition • Zugriffe: 4353

Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 2 02.04.2020 20:50
Wolfgang • Zugriffe: 2372
Scrollbalken - Scrollleiste - Scrollbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Denis Wolf 6 15.01.2019 18:39
Wolfgang • Zugriffe: 5624

Scrollen in langen Texten, Beiträgen und im gesamten Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

11.12.2019 06:09
von

Wolfgang • Zugriffe: 8918

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €