Hallo zusammen,
ich habe ein JavaScript auf unseren Webseiten eingebunden mit dem ein Top-Link Button generiert wird, über den man zum Seitenanfang scrollen kann. Das Ganze funktioniert auch soweit sehr gut bis auf einen Punkt bei dem ich nicht weiß wie ich das Problem lösen kann.
Dieses Script bindet den Button immer im Body ein und somit überragt der Button die eigentliche Webseite, wenn bei gewissen Auflösungen der Seiten ein Seitenrand sichtbar ist. Meine Vorstellung ist, dass der Button nicht über den Wrapper hinaus positioniert werden kann.
Ich hatte versucht im Script „body,html“ gegen „wrapper“ zu ersetzen leider ohne Erfolg, denn das Script wird trotzdem im Body eingebunden. Hier der verwendete Code:
JavaScript Code
Code:
$(document).ready(function(){
var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
$("body").append(back_to_top_button)
$(".back-to-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
CSS Code
Code:
.back-to-top {
background:red;
position:fixed;
bottom:20px;
right:20px;
padding:1em;
z-index:10;
border:3px solid #000;
}
Welche Möglichkeit habe ich damit der Button immer innerhalb vom Wrapper positioniert wird. Ist dies mit CSS oder einer anderen Methode zu realisieren. Die Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden.
Danke!
Gruß
Thomas
Lesezeichen