Webhufi
Erfahrenes Mitglied
Hallo,
ich habe einen netten Knopf (grau/weiß), der mir von jeder Stelle aus wieder nach oben springt.
Jetzt wünsche ich mir einen zweiten Knopf (Farbe kann ich ändern) links daneben, der an eine andere Stelle springt; im Beipiel zu diesem farblich abgehobenen Menü oder dem Text darüber 'Alle Bilder werden...'. Bitte hier schauen
Kann mir jemand helfen?
Danke und viele Grüße
Norbert
Die Codes:
CSS:
-------------------------------------------------
HTML:
ich habe einen netten Knopf (grau/weiß), der mir von jeder Stelle aus wieder nach oben springt.
Jetzt wünsche ich mir einen zweiten Knopf (Farbe kann ich ändern) links daneben, der an eine andere Stelle springt; im Beipiel zu diesem farblich abgehobenen Menü oder dem Text darüber 'Alle Bilder werden...'. Bitte hier schauen
Kann mir jemand helfen?
Danke und viele Grüße
Norbert
Die Codes:
CSS:
CSS:
<link rel="stylesheet" href="[URL]https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css[/URL]">
<style>
/* NACH OBEN */
.obenkreis {
font-size:44px;
color:rgba(51,51,51,0.4);
/* Versuch neuer Farben: color:rgba(232,102,73,1.0)*/
}
.obenpfeil {
font-size:32px;
color:#fff;
position:relative;
top:3px;
transition: all 0.2s ease;
}
.obenpfeil:hover {
top:-3px;
font-size:36px;
}
#back-top2 {
position: fixed;
bottom: 10%;
left:50%;
margin-left:520px;
z-index: 1000;
}
@media (max-width: 1180px) {
#back-top2 {
bottom: 0px;
left:100%;
margin-left:-50px;
}}
#back-top2 span {
display: block;
}
</style>
HTML:
HTML:
<!-- NACH OBEN -->
<div id="back-top2" style="display: block; ">
<a href="#top">
<span class="fa-stack fa-lg">
<i class="obenkreis fa fa-circle fa-stack-2x"></i>
<i class="fa fa-angle-double-up fa-stack-1x obenpfeil"></i>
</span>
</a>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
// hide #back-top
$("#back-top2").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#back-top2').fadeIn();
} else {
$('#back-top2').fadeOut();
}
});
// scroll body to 0px
$('#back-top2 a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
Zuletzt bearbeitet von einem Moderator: