Last Forum
Login or regist
Registrieren
Passwort vergessen?

Forum Tutorials Ilch 2.1.x Tutorials Scroll Site to Top!

Scroll Site to Top!

Post von IronMan » 12.08.2018 20:20:07


Hier mal was ganz Einfaches um einen Scroll to Top Button in die Seite einzufügen.

Basis ist das Standard Layout vom Ilch 2.1.x CMS, Schwierigkeit: Easy

Öffne die index.php des Clan3Columns Layouts,
fügt vor dem schließenden Head-Tag </head> folgendes ein
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){

// Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
var back_to_top_button = ['&lt;a href="#top" class="back-to-top"&gt;&lt;/a&gt;'].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() &gt; 100) { // 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;
});
});

});
&lt;/script&gt;

Speichert diese, und ladet die index.php wieder auf euren Webspace. Das gleiche macht Ihr auch mit der index-full.php.

Öffnet nun die style.css und fügt ganz unten folgendes ein
.back-to-top {
background-image: Url('img/gtop.gif');
height: 50px;
width: 50px;
position: fixed;
bottom:20px;
right:70px;
padding:1em;
}
Speichert die style.css und ladet diese wieder auf euren Webspace.
Da wir ein Image (Bild) für die Darstellung des Back to Top Buttons nutzen, müsst Ihr noch ein Image in den img Ordner hochladen.

Hier habe ich für euch einen im .gif Format, den könnt Ihr gerne nutzen wenn Ihr möchtet. Mit der rechten Maustaste auf das Image klicken und dann Bild speichern unter wählen.

User avatar
IronMan
Administrator
Members
Moderator
Grünschnabel
 
Beiträge: 4
Dabei seit: 2018-06-02 07:38:30