Scroll to Top - Zum Seitenanfang scrollen

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Scroll to Top - Zum Seitenanfang scrollen

      Auf der Incomedia Website X5 Seite ist ein Scroll Top Button eingebunden. Es ist schade das die Funktion nicht direkt mit eingebaut wurde.

      Wer wissen will wie das geht schaut mal in den Quelltext....

      Ich habe das mal gemacht und ein wenig geändert und nun mal aufgeschrieben

      HTML-Quellcode

      1. <script>
      2. _jq(function() {
      3. var elem = '<img onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt="" style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102" src="data:image/png;base64,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" />';
      4. _jq("body").append(elem);
      5. _jq(window).scroll(function () {
      6. if (_jq(window).scrollTop() > 100) {
      7. _jq('#ScrollToTop').fadeIn();
      8. } else if (_jq(window).scrollTop() < 50) {
      9. _jq('#ScrollToTop').fadeOut();
      10. }
      11. });
      12. });
      13. </script>
      Alles anzeigen


      Wie man sieht ist das Bild base64 codiert. Das kann man leicht selbst erledigen

      base64-image.de/

      Du nimmst dir dann dort den Bereich zwischen den "" von XHTML Image

      also -->>> data:image/png;base64,......... und ersetzt obige Zeile damit.

      Das codierte Bild oben stammt von Pixabay kann also verwendet werden

      pixabay.com/de/icon-pfeil-nach-unten-runde-157360/

      Der komplette Code kommt in den HEAD
      also direkt vor dem schließenden /head
      :hi: :mario:
    • oder als richtiger Link zum Bild...

      HTML-Quellcode

      1. <script>
      2. _jq(function() {
      3. var elem = '<img onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt="" style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102" src="http://example.org/bild.jpg" />';
      4. _jq("body").append(elem);
      5. _jq(window).scroll(function () {
      6. if (_jq(window).scrollTop() > 100) {
      7. _jq('#ScrollToTop').fadeIn();
      8. } else if (_jq(window).scrollTop() < 50) {
      9. _jq('#ScrollToTop').fadeOut();
      10. }
      11. });
      12. });
      13. </script>
      Alles anzeigen

      :hi: :mario:
    • Guten Tag!

      Habe versucht den zweiten Code mal zu verwenden. Also mit richtigem Link zum Bild, statt base64-codiert. Passiert leider nix.

      Was hab ich falsch gemacht???

      Quellcode

      1. <script>
      2. _jq(function() {
      3. var elem = '<img
      4. onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt=""
      5. style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102"
      6. [color=#0000CD]src="http://example.org/bild.jpg"
      7. />';
      8. _jq("body").append(elem);
      9. _jq(window).scroll(function () {
      10. if (_jq(window).scrollTop() > 100) {
      11. _jq('#ScrollToTop').fadeIn();
      12. } else if (_jq(window).scrollTop() < 50) {
      13. _jq('#ScrollToTop').fadeOut();
      14. }
      15. });
      16. });
      17. </script>
      Alles anzeigen

      LG
      Labelle

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Labelle ()

    • Frag mich nicht warum das da steht, in meinem Code steht es nicht ?(
      hier noch mal der Code von meiner Site

      Quellcode

      1. <script>
      2. _jq(function() {
      3. var elem = '<img
      4. onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt=""
      5. style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102"
      6. src="http://example.org/bild.jpg"
      7. />';
      8. _jq("body").append(elem);
      9. _jq(window).scroll(function () {
      10. if (_jq(window).scrollTop() > 100) {
      11. _jq('#ScrollToTop').fadeIn();
      12. } else if (_jq(window).scrollTop() < 50) {
      13. _jq('#ScrollToTop').fadeOut();
      14. }
      15. });
      16. });
      17. </script>
      Alles anzeigen


      Fällt mir grad ein, kann das Browserabhängig sein?
      LG
      Labelle
    • So nochmal am PC kurz geschaut.

      Der Code muss in eine Zeile ohne Umbruch ansonsten müsste man noch das \ nutzen... also wie oben zu sehen

      HTML-Quellcode

      1. <script>
      2. _jq(function() {
      3. var elem = '<img onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt=""style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102" src="http://example.org/bild.jpg"/>';
      4. _jq("body").append(elem);
      5. _jq(window).scroll(function () {
      6. if (_jq(window).scrollTop() > 100) {
      7. _jq('#ScrollToTop').fadeIn();
      8. } else if (_jq(window).scrollTop() < 50) {
      9. _jq('#ScrollToTop').fadeOut();
      10. }
      11. });
      12. });
      13. </script>
      Alles anzeigen


      achte auf die Zeilennummern - Zeile 3 muss in eine
      :hi: :mario: