Contao-Camp 2024
Ergebnis 1 bis 9 von 9

Thema: Smooth Scroll

  1. #1
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard Smooth Scroll

    Hallo ,
    ich hätte gerne eine Smooth Scroll Funktion eingebaut.
    Habe die onemarshall/contao-smooth-scroll installiert, aktiviert und einen Link in meinem footer eingbaut
    HTML-Code:
    <a href="#">Nach oben</a>
    Geht nicht. Was mache ich falsch?

  2. #2
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Hast Du die js_smoothscroll im Seitenlayout aktiviert?
    Grüße, Stefko

  3. #3
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    yo... das Häckchen hatte ich gemacht...

  4. #4
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    Habe jetzt ein anders Script eingesetzt, das funktioniert prima.

  5. #5
    Contao-Nutzer
    Registriert seit
    29.03.2010.
    Beiträge
    44

    Standard

    Hi,
    welches Skript hast du am Ende genommen?
    Bei mir funktioniert die Erweiterung auch nicht...

    VG, P

  6. #6
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    jQuery anschalten

    ...in Zusätzliche <head>-Tags
    Code:
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
    in Eigener JavaScript-Code folgendes Script:
    Code:
    <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"><i class="fas fa-angle-double-up"></i></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() > 250) { // Wenn 100 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>

    CSS anpassen nach Wunsch, z.B.:
    HTML-Code:
    /*--------------------------------------------------------------
    Scrooll to top button erzeugt mit jQuery
    --------------------------------------------------------------*/
    
     .back-to-top {
         z-index: 1;
         background: #666;
         border-radius: 45px;
         position: fixed;
         bottom: 40px;
         right: 10px;
         padding: 0.5em;
         color: #fff;
     }

    probier's mal aus...

  7. #7
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Code:
    html {
    scroll-behavior: smooth;
    }
    Wenn's auch mal ohne jQuery/Javascript sein darf.
    ggf. Browser-Support beachten ... https://caniuse.com/#search=scroll-behavior
    Grüsse
    Bernhard


  8. #8
    Contao-Nutzer
    Registriert seit
    29.03.2010.
    Beiträge
    44

    Standard

    Ok, danke, ich brauchte eines für alle Links auf einem Onepager.
    Falls das sonst jemand mal braucht, dieses hier funktioniert gut.
    jQuery im Seitenlayout aktivieren, nicht vergessen:

    Quelle: w3schools.com
    https://www.w3schools.com/howto/howt...oth_scroll.asp

    Code:
    $(document).ready(function(){
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {
    
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();
    
          // Store hash
          var hash = this.hash;
    
          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 400, function(){
    
            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });

  9. #9
    Contao-Nutzer
    Registriert seit
    24.06.2010.
    Ort
    Arnsberg
    Beiträge
    78

    Standard

    Perfekt, das klappt bei internen Verlinkungen auf Anker prima! Contao 4.9x.
    Vielen Dank!
    Martin

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •