nicht angemeldet
oxo888oxo
Der Martin
MudGuard
Gunnar Bittersmann
oxo888oxo
Tabellenkalk
Gunnar Bittersmann
oxo888oxo
Hallo
Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen. Ich habe das nun erstmal mittels eines JQuery-Scripts realisiert. Das ganze funktionier auch prime (Desktop und Mobil).
Nun ist es aber so, dass ich JQuery nur für diese eine einzige Sache nutze. Und da dachte ich, dass ist doch sicher etwas oversized :) Gigt es diese Back-to-Top-Button Funktiuon aus JQuery auch separat? Also ohne den ganzen restlichen "Ballast", den ich ja garnicht anwende.
Über Hilfe/Ratschläge von Euch würde ich mich sehr freuen.
Hier das, was ich da zur Zeit einsetze:
Auge<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
var back_to_top_button = ['<a href="#top" class="back-to-top"><img src="/bilder/back-to-top-button.gif"></a>'].join("");
$("body").append(back_to_top_button)
// Der Button wird ausgeblendet
$(".back-to-top").hide();
// Funktion für das Scroll-Verhalten
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) { // Wenn 1000 Pixel gescrolled wurde
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function () { // Klick auf den Button
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style>
.back-to-top {
position: fixed;
bottom:5px;
right:0px;
}
</style>
Hi,
Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen. Ich habe das nun erstmal mittels eines JQuery-Scripts realisiert. Das ganze funktionier auch prime (Desktop und Mobil).
tatsächlich? Solange Javascript zur Verfügung steht, vielleicht.
Nun ist es aber so, dass ich JQuery nur für diese eine einzige Sache nutze. Und da dachte ich, dass ist doch sicher etwas oversized :) Gigt es diese Back-to-Top-Button Funktiuon aus JQuery auch separat? Also ohne den ganzen restlichen "Ballast", den ich ja garnicht anwende.
Natürlich: Setze einen normalen Link zum Dokumentanfang: <a href="#">Top</a>
Dessen Erscheinungsbild kannst du mit CSS nachBelieben gestalten.
So long,
Martin
tatsächlich? Solange Javascript zur Verfügung steht, vielleicht.
Ja, da hast Du natürlich Recht. Wobei man ja schon sagen muss, dass heutzutage doch die allermeisten User JS nicht deaktiviert haben. Ich wollte aber eh noch einen Fallbacj für den Fall einbauen.
Natürlich: Setze einen normalen Link zum Dokumentanfang: <a href="#">Top</a>
Ja hatte ich auch erst überlegt. Aber gerade im mobilen Web führt das oft zu Verwirrung bei den Usern, wenn ihnen nicht durch Scrollen visualisiert wird, dass es wieder nach oben geht. Ist zwar blöd, aber doch nicht ganz von der Hand zu weisen. Sehr viele User kennen sich ja leider mit der "gescheiten" Bedienung ihres Browsers nicht mehr aus.
Hallo,
tatsächlich? Solange Javascript zur Verfügung steht, vielleicht.
Ja, da hast Du natürlich Recht. Wobei man ja schon sagen muss, dass heutzutage doch die allermeisten User JS nicht deaktiviert haben.
vermutlich; und die wenigen, die das tun, werden auch solche Krücken wie einen Back-To-Top-Link nicht brauchen.
Natürlich: Setze einen normalen Link zum Dokumentanfang: <a href="#">Top</a>
Ja hatte ich auch erst überlegt. Aber gerade im mobilen Web führt das oft zu Verwirrung bei den Usern, wenn ihnen nicht durch Scrollen visualisiert wird, dass es wieder nach oben geht.
Hä? Den Einwand verstehe ich jetzt nicht. Worin liegt aus der Sicht des Nutzers der Unterschied zwischen einem Button, der per Javascript zum Dokumentanfang springt, und einem Link, der das gleiche ohne Javascript tut?
Den Animationseffekt (den ich persönlich sehr störend empfinde) hast du je nach UI, Browser und dessen Einstellungen auch beim seiteninternen Link. Dieses "Soft Scrolling" gehört normalerweise mit zu den ersten "Features", die ich nach der Installation eines Browsers abstelle.
Sehr viele User kennen sich ja leider mit der "gescheiten" Bedienung ihres Browsers nicht mehr aus.
Das ist leider so.
So long,
Martin
vermutlich; und die wenigen, die das tun, werden auch solche Krücken wie einen Back-To-Top-Link nicht brauchen.
Ja das sehe ich ganz genau so.
Hä? Den Einwand verstehe ich jetzt nicht. Worin liegt aus der Sicht des Nutzers der Unterschied zwischen einem Button, der per Javascript zum Dokumentanfang springt, und einem Link, der das gleiche ohne Javascript tut?
Meines Verstandes nach gibt es da natürlich keinen Unterschied. Ich habe das aber meheren leuten vorgeführt. Und da waren in der Tat nicht wenige dabei, die sich gewundert haben, wo die denn plötzlich gelandet sind nach Klick auf den "normalen" Nach-Oben-Link. Und als die dann eine Variante zu sehen bekommen hatte mit Scroll-Effekt, hatten die es geschnallt. Die meisten kannten es sogar von Ebay, die das ja auch seit einiger Zeit einsetzen.
Dieses "Soft Scrolling" gehört normalerweise mit zu den ersten "Features", die ich nach der Installation eines Browsers abstelle.
Ich mag das ja :-)
Hallo
Hä? Den Einwand verstehe ich jetzt nicht. Worin liegt aus der Sicht des Nutzers der Unterschied zwischen einem Button, der per Javascript zum Dokumentanfang springt, und einem Link, der das gleiche ohne Javascript tut?
Meines Verstandes nach gibt es da natürlich keinen Unterschied. Ich habe das aber meheren leuten vorgeführt. Und da waren in der Tat nicht wenige dabei, die sich gewundert haben, wo die denn plötzlich gelandet sind nach Klick auf den "normalen" Nach-Oben-Link. Und als die dann eine Variante zu sehen bekommen hatte mit Scroll-Effekt, hatten die es geschnallt. Die meisten kannten es sogar von Ebay, die das ja auch seit einiger Zeit einsetzen.
Die „Leute“ drücken auf einen Button, auf dem „nach oben“ oder „zum Seitenanfang“ (oder ähnliches) steht oder ein (hoffentlich) selbsterklärendes, das Ziel verdeutlichendes Symbol zu sehen ist, und wundern sich allen Ernstes, wo sie nach Betätigung des Buttons landen? Dann solltest du über dein Zielpublikum sinnieren.
Oder ist der Button eben nicht selbsterklärend? Dann solltest du dir über sein Aussehen Gedanken machen.
Tschö, Auge
Dann solltest du über dein Zielpublikum sinnieren.
Vermutlich sind das die gleichen Leute, die nicht wissen, dass ein Browser eine Adresszeile hat. Die geben immer alle URLs bei Google ein. Das ist wirklich mein Ernst. Davon gibt es heutzutage mehr als Du wohl glauben magst. Auch wenn Du es als alter Web-Hase vielleicht nicht wahrhaben willst :)
Denen brauchst Du dann mit "Kontextmenü", "Rechte Maustaste", STRG+c und STRG+V und sowas garnicht kommen :-(
Hallo
Dann solltest du über dein Zielpublikum sinnieren.
Vermutlich sind das die gleichen Leute, die nicht wissen, dass ein Browser eine Adresszeile hat. Die geben immer alle URLs bei Google ein. Das ist wirklich mein Ernst. Davon gibt es heutzutage mehr als Du wohl glauben magst. Auch wenn Du es als alter Web-Hase vielleicht nicht wahrhaben willst :)
Dass es diese Art von Leuten zuhauf gibt, ist mir bekannt.
Denen brauchst Du dann mit "Kontextmenü", "Rechte Maustaste", STRG+c und STRG+V und sowas garnicht kommen :-(
Dennoch glaube ich, erwarten zu können, dass sie einen Text wie „nach oben“ oder „zum Seitenanfang“ oder ein entsprechendes Symbol deuten können und sich nicht wundern, dass sie nach einen Klick oder Tapp woanders sind, als zuvor. Dazu braucht man keine Spezialtasten, Tastenkombinationen, oder ähnliches.
Tschö, Auge
@@Auge
Dennoch glaube ich, erwarten zu können, dass sie einen Text wie „nach oben“ oder „zum Seitenanfang“ oder ein entsprechendes Symbol deuten können und sich nicht wundern, dass sie nach einen Klick oder Tapp woanders sind, als zuvor.
Dennoch glaube ich, dass eine Animation auch denen hilft sich zurechtzufinden, die das ohne Animation auch könnten.
(Das heißt, Animation ist kein Muss, sondern kann (lies: sollte) als progressive enhancement inplementiert werden.)
In dem Zusammenhang erinnere ich mich wieder an Tim Kadlecs großartigen Vortrag „The Space Between“ auf der beyond tellerand Berlin 2014 (Video, Folien).
LLAP 🖖
(Das heißt, Animation ist kein Muss, sondern kann (lies: sollte) als progressive enhancement inplementiert werden.)
OK, wie genau meinst Du das denn jetzt. Doch nicht etwas so, dass man den Usern noch einen "Schalter" anbietet, ob sie mit ohner ohne Scrolling nach oben wollen?
Hallo
(Das heißt, Animation ist kein Muss, sondern kann (lies: sollte) als progressive enhancement inplementiert werden.)
OK, wie genau meinst Du das denn jetzt. Doch nicht etwas so, dass man den Usern noch einen "Schalter" anbietet, ob sie mit ohner ohne Scrolling nach oben wollen?
Nein, man implementiert es (wie auch immer das technisch umgesetzt ist) und Browser, die den Code nicht ausführen können, tun es halt nicht. Alle anderen schon.
Im Übrigen wollte ich keineswegs gegen die Animation sprechen. Ich halte nur das beobachtete Verhalten, dass die Begründung liefert, für komisch.
Tschö, Auge
@@Auge
(Das heißt, Animation ist kein Muss, sondern kann (lies: sollte) als progressive enhancement inplementiert werden.)
Nein, man implementiert es (wie auch immer das technisch umgesetzt ist) und Browser, die den Code nicht ausführen können, tun es halt nicht. Alle anderen schon.
Um Unklarheiten zu begegenen: „tun es halt nicht“ meint „tun es halt nicht animiert“. Zum Seitenanfang wird natürlich dennoch gegangen, in dem Fall gesprungen.
LLAP 🖖
Nein, man implementiert es (wie auch immer das technisch umgesetzt ist) und Browser, die den Code nicht ausführen können, tun es halt nicht. Alle anderen schon.
Jo bei mir ist es nun so: Wenn jemand JavaScript deaktiviert hat, wir der Button garnicht erst angezeigt. Das könnte man sicher noch verbessern, idem dann eben nur der normale Anker-Link zu sehen ist. Mal gucken, ob ich das hinbekomme.
Im Übrigen wollte ich keineswegs gegen die Animation sprechen. Ich halte nur das beobachtete Verhalten, dass die Begründung liefert, für komisch.
Ist sie ja auch. Erschreckend geradezu würde ich so sagen :-) Aber leider ist auch was dan, fürchte ich.
Dennoch glaube ich, erwarten zu können, dass sie einen Text wie „nach oben“ oder „zum Seitenanfang“ oder ein entsprechendes Symbol deuten können und sich nicht wundern, dass sie nach einen Klick oder Tapp woanders sind, als zuvor. Dazu braucht man keine Spezialtasten, Tastenkombinationen, oder ähnliches.
Ja ich verstehe schon was Du meinst. Eine Visualisierung in Form eines Scrollings nach oben, erleichtert es denen aber dennoch :-) Und hübsch ist es ja auch noch. Das mit dem "hübsch" ist natürlich eine Sache des Geschmacks :-)
Ich bin immer wieder sehr erstaunt, wi unkonzentriert und hektisch manche Leute auf ihren Smartphone herumhämmern und dabei den Überblick verlieren. Wie es scheint, wird bei der Internet-mit-dem-Smartphone-Nutzung, der Versand oft vorrübergehend auf Pause geschaltet.
Hallo,
der Versand oft vorrübergehend auf Pause geschaltet.
verkaufe ein „r“ und kauf dafür ein „t“!
Gruß
Kalk
@@Tabellenkalk
der Versand oft vorrübergehend auf Pause geschaltet.
verkaufe ein „r“ und kauf dafür ein „t“!
Wollen wir rauschen?
LLAP 🖖
verkaufe ein „r“ und kauf dafür ein „t“!
Eine ganz ausgezeichnete Idee.
@@Tabellenkalk
der Versand oft vorrübergehend auf Pause geschaltet.
verkaufe ein „r“ und kauf dafür ein „t“!
Woanders gibt’s gerade „t“ im Überfluss. Allerdings fehlt dort kein „r“. Dafür aber ein „s“.
Da muss sich wohl noch ein Dritter zum Ringtausch finden.
LLAP 🖖
Hi,
Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen.
Wozu?
Die Taste "Pos1" ("Home" bei englischer Tastatur) macht das doch schon.
cu,
Andreas a/k/a MudGuard
@@MudGuard
Die Taste "Pos1" ("Home" bei englischer Tastatur) macht das doch schon.
Ich hab werder bei deutscher Tastatur eine Taste "Pos1" noch bei englischer Tastatur eine Taste "Home".
„Macht das schon“ kann sich nur auf einen recht beschränkten Nutzerkreis beziehen.
LLAP 🖖
Hallo Gunnar,
„Macht das schon“ kann sich nur auf einen recht beschränkten Nutzerkreis beziehen.
Bei Macbooks ist das ↑ (und natürlich ↓ für das Gegenteil) - solche Kombis gibt es in jedem Desktop-Betriebssystem.
Was natürlich nichts daran ändert, dass viele User das nicht wissen.
LG,
CK
@@Christian Kruse
TIL:
Bei Macbooks ist das ↑ (und natürlich ↓ für das Gegenteil) - solche Kombis gibt es in jedem Desktop-Betriebssystem.
Was natürlich nichts daran ändert, dass viele User das nicht wissen.
Wozu ich bis eben auch gehörte.
Mit dem irgendeiner neuen Version des OS X (10.7? 10.8?) wurde die 3-Finger-Wisch-Geste abgeschaft, mit der man zum Seitenanfang oder -ende kam. War ich richtig traurig, denn die hatte ich ständig verwendet.
Seitdem scrolle ich mir einen Wolf. Nun nicht mehr. Danke.
Auch wenn mir die Geste immer noch lieber wäre als die Tastatur.
LLAP 🖖
Hallo Gunnar,
Mit dem irgendeiner neuen Version des OS X (10.7? 10.8?) wurde die 3-Finger-Wisch-Geste abgeschaft, mit der man zum Seitenanfang oder -ende kam. War ich richtig traurig, denn die hatte ich ständig verwendet.
Du kennst BetterTouchTool?
Seitdem scrolle ich mir einen Wolf. Nun nicht mehr. Danke.
Gern. Vielleicht interessiert dich auch das hier.
LG,
CK
Wozu?
Die Taste "Pos1" ("Home" bei englischer Tastatur) macht das doch schon.
Klar, das ist natürlich ein berechtigter Einwand bzw. eine solche Frage. Aber gehr mal los und frag 1000 Durschnutts-Internet-User nach diesen Tasten. Da wird die Gruppe, die das kennt aber sehr schnell klitzeklein. Leider.
Und im mobilen Web auf Smartphones geht das auch meistens nicht.
Hallo,
Wozu?
Die Taste "Pos1" ("Home" bei englischer Tastatur) macht das doch schon.
Neben den Usern, die diese Taste garnicht haben, und denen die sie zwar haben, aber nicht kennen, gibt's noch die, die eine so eingeschränkte Tastatur haben, dass diese Funktionstaste nur über eine spezielle Tastaturkombination erreichbar ist, die soweit auseinanderliegt, dass man dafür beide Hände benötigt...
grrrmmpf
Gruß
Kalk
@@oxo888oxo
Ich habe mich entschlossen, einen so genannten Back-to-Top-Button auf meiner Website einzubauen.
<a href="#">, und es kann auch mehrere davon geben.
Alle auswählen (document.querySelectorAll('[href="#"]')) und für alle einen Eventhandler definieren. Darin die Standardaktion unterbinden (preventDefault()) und das zu scrollende Element (bei mir main) per transform: transitionY() genau um window.pageYOffset Pixel verschieben. Da per Stylesheet auf transform eine Transition gesetzt ist, scrollt der Inhalt langsam zum Seitenanfang.
Dort angekommen, wird transform wieder zurückgesetzt und der richtige Link zum Seitenanfang ausgeführt. Nur die Scrollbar verhält sich dabei etwas merkwürdig.
Codepen: smooth scrolling to top
LLAP 🖖
Hallo
Ich habe mich nun entschlossen, es doch per JQuery einzubinden. Die "komrimierte" Version 2.1.4 ist auch nur noch ca. 25 kb groß. Damit kann ich leben, denke ich :-)
Ich habe es auch so eingebunden, dass der Script-Kram unter HTML5 erst geladen wird, wenn der ganze Rest der Seite schon geladen wurde. Somit habe ich bei Google PageSpeed Insights auch in allen 3 Diszilpinen weiterhin 99/100 Punkten.
Vielen lieben Dank natürlich auch wieder für Eure netten Antworten usw.
Gruß Ingo