Knopf nach oben

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

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:
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:
Du kannst ja alles kopieren und dann die variable ändern, dann kannst du das hier verwenden
Javascript:
$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 800);

das hast du in der zeile 28-31 im JS teil.


elemntID = ist dann deine ID wo hin du springen möchtest.
 
Zuletzt bearbeitet:
Ich bin ja ziemlich unbedarft, aber ich habe bemerkt, dass der zweite Knopf wohl anders heißen muss. Deshalb habe ich überall 'obenpfeil' umbenannt in 'obenpfeil2'.Die Klasse <i=class="obenkreis" ... heißt jetzt <i="obenkreis2" ...

Geändert: $('html, body').animate({
scrollTop: $("#menu").offset().top
}, 800);

wobei ich die ID menu vergeben habe.

Möglicherweise stimt das alles sogar, nur sitzt der neue Knopf an der gleichen Stelle wie der erste, und nur der erste funktioniert. Wie kann ich die Position des neuen Knopfes verändern, so dass er z.B. 20 px (oder in %) links des ersten Knopfes steht?
Wahrscheinlich muss 'position:relative;' anders heißen; aber wie?
 
Die Position wird durch dieses CSS fest gelegt:
Code:
#back-top2 {
    bottom: 0px;
    left: 100%;
    margin-left: -50px;
}
Um den zweiten Knopf links davon anzuordnen, brauchst Du nur die left-Position zu ändern:
Code:
#id-des-zweiten-knopfes {
    bottom: 0px;
    left: 100%;
    margin-left: -120px;
}
 
Ich musste noch eine Änderung vornehmen (bis ich Laie darauf gekommen bin!!!), sonst hocken beide Knöpfe doch übereinander:

#back-top2 {
position: fixed;
bottom: 10%;
left:50%;
/*margin-left:520px;*/
margin-left:470px;
z-index: 1000;
}

Die Codes der beiden Knöpfe habe ich so verändert, dass überall zwischen Knopf 1 und Knopf 2 unterschieden wird.

Bei meinen vielen Versuchen klappte es zwischendurch, dass die Buttons nach top und nach menu sprangen; jetzt, am Ende aller Test, springt der gelbliche Knopf auch nach top! Warum nur, bitte? Im HTML steht doch 'menu'?

Schaut mal hier auf die Testseite
 
jetzt, am Ende aller Test, springt der gelbliche Knopf auch nach top! Warum nur, bitte? Im HTML steht doch 'menu'?
Da ist dir irgend wie die Scrollposition abhanden gekommen, bei beiden Knöpfen steht
scrollTop: 0
bei der Animate-Anweisung (Zeile 328 und Zeile 355)
 
CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* NACH OBEN 2 */
.obenkreis2 {
font-size:44px;
color:#E6D5B7;
}
.obenpfeil2 {
font-size:32px;
color:#grey;
position:relative;
top:3px;
transition: all 0.2s ease;
}
.obenpfeil2:hover {
top:-3px;
font-size:36px;
}

#back-top2 {
position: fixed;
bottom: 10%;
left:50%;
margin-left:470px;
z-index: 1000;
}
@media (max-width: 1180px) {
#back-top2 {
bottom: 0px;
left:100%;
margin-left:-120px;
}}
#back-top2 span {
display: block;
}
</style>

HTM

<!-- NACH OBEN 2 -->
<div id="back-top2" style="display: block; ">
<a href="#menu">
<span class="fa-stack fa-lg">
<i class="obenkreis2 fa fa-circle fa-stack-2x"></i>
<i class="fa fa-angle-double-up fa-stack-1x obenpfeil2"></i>
</span>
</a>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

// hide #back-top2
$("#back-top2").hide();

// fade in #back-top2
$(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>
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück