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
Geht nicht. Was mache ich falsch?HTML-Code:<a href="#">Nach oben</a>
Druckbare Version
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
Geht nicht. Was mache ich falsch?HTML-Code:<a href="#">Nach oben</a>
Hast Du die js_smoothscroll im Seitenlayout aktiviert?
yo... das Häckchen hatte ich gemacht...
Habe jetzt ein anders Script eingesetzt, das funktioniert prima.
Hi,
welches Skript hast du am Ende genommen?
Bei mir funktioniert die Erweiterung auch nicht...
VG, P
jQuery anschalten
...in Zusätzliche <head>-Tags
in Eigener JavaScript-Code folgendes Script: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>
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...
Wenn's auch mal ohne jQuery/Javascript sein darf.Code:html {
scroll-behavior: smooth;
}
ggf. Browser-Support beachten ... https://caniuse.com/#search=scroll-behavior
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
});
});
Perfekt, das klappt bei internen Verlinkungen auf Anker prima! Contao 4.9x.
Vielen Dank!
Martin