rauf und runter scrollen mit Javascript

Ich habe versucht, die folgenden Codes zusammen, aber funktioniert nicht. Wenn ich nach unten scrolle, erscheint die Seite-hoch-Taste und wenn ich darauf klicke, scrolle ich auf den Anfang der Seite. Wenn ich den Bildlauf zum Seitenanfang hochlege, erscheint die Bild-ab-Taste, und wenn ich darauf klicke, wird die gleiche Aktion mit Blättern nach oben durchgeführt.rauf und runter scrollen mit Javascript

var amountScrolledTop = 200; 
 
    var amountScrolledDown = 50; 
 

 
    $(window).scroll(function() { 
 
\t  if ($(window).scrollTop() > amountScrolledTop) { 
 
\t \t  $('a.back-to-top').fadeIn('slow'); 
 
    \t } else { 
 
\t  \t $('a.back-to-top').fadeOut('slow'); 
 
\t  } 
 
    \t if ($(window).scrollTop() < amountScrolledDown) { 
 
\t  \t $('a.down1').fadeIn('slow'); 
 
    \t } else { 
 
\t  \t $('a.down1').fadeOut('slow'); 
 
    \t } 
 
    }); 
 

 
    $('a.back-to-top').click(function() { 
 
\t  $('html, body').animate({ 
 
\t \t  scrollTop: 0 
 
    \t }, 'slow'); 
 
\t  return false; 
 
    }); 
 

 
    $('a.down1').click(function() { 
 
\t  var objDiv = document.getElementById("mid"); 
 
\t  objDiv.scrollTop = objDiv.scrollHeight; 
 
    });

.down1{ 
 
\t  width: 60px; 
 
\t  height: 60px; 
 
\t  text-indent: -9999px; 
 
\t  position: fixed; 
 
\t  z-index: 999; 
 
\t  right: 60px; 
 
\t  top: 80px; 
 
\t  background: url("../img/simple_icons/downArrow.png") no-repeat center 43%; 
 
    } 
 
    .back-to-top{ 
 
\t  display: none; 
 
\t  width: 60px; 
 
\t  height: 60px; 
 
\t  text-indent: -9999px; 
 
\t  position: fixed; 
 
\t  z-index: 999; 
 
\t  right: 20px; 
 
\t  bottom: 20px; 
 
\t  background: url("../img/simple_icons/upArrow.png") no-repeat center 43%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
\t  <a href="#" class="down1" id="down1">Down to</a> 
 
     <a href="#" class="back-to-top" id="back-to-top">Back to Top</a> 
 
     . 
 
     . 
 
     . 
 
     <div class="mid"></div> 
 
</body>

Nach unten-Taste immer auf die Rolle zum Seitenanfang. Sogar ich lösche den ganzen Javascript-Code.

Quelle

2016-11-17 Burak Kocaman

Versuchen Sie Ihren Browser-Cache zu löschen. – k97513

Versuchen Sie, Anzeige keine nach dem Ausblenden ... –

Was ist das Problem, das Sie genau gegenüberstellen? –

Ich denke, das ist, was Sie gesucht haben, habe ich einige Kommentare auf den Code, um die Änderungen, die ich gemacht habe, zu beschreiben.

var amountScrolledTop = 200; 
 
var amountScrolledDown = 50; 
 

 
$(window).scroll(function() { 
 

 
    if ($(window).scrollTop() > amountScrolledTop) { 
 
    $('a.back-to-top').fadeIn('slow'); 
 
    } else { 
 
    $('a.back-to-top').fadeOut('slow'); 
 
    } 
 

 
    if ($(window).scrollTop() < amountScrolledDown) { 
 
    $('a.down1').fadeIn('slow'); 
 
    } else { 
 
    $('a.down1').fadeOut('slow'); 
 
    } 
 
}); 
 

 
$('a.back-to-top').click(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: 0 
 
    }, 'slow'); 
 
    return false; 
 
}); 
 

 
$('a.down1').click(function(e) { 
 
    
 
    //you have to prevent the default action of the link (the default going to the top because of href="#" even if there is no javascript) 
 
    e.preventDefault(); 
 
    
 
    //objDiv used to be "null" because it was defined by class not id in html 
 
    var objDiv = document.getElementById("mid"); 
 
    $('html, body').animate({ 
 
    scrollTop: objDiv.scrollHeight 
 
    }, 'slow'); 
 
});

.down1{ 
 
    width: 60px; 
 
    height: 60px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 60px; 
 
    top: 80px; 
 
    background: url("../img/simple_icons/downArrow.png") no-repeat center 43%; 
 
} 
 
.back-to-top{ 
 
    display: none; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 20px; 
 
    bottom: 20px; 
 
    background: url("../img/simple_icons/upArrow.png") no-repeat center 43%; 
 
} 
 
#mid { 
 
    height: 2000px; 
 
    background-color: #bbb; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="down1" id="down1">Down to</a> 
 
<a href="#" class="back-to-top" id="back-to-top">Back to Top</a> 
 
<!-- it was class="mid" --> 
 
<div id="mid"></div>

Quelle

2016-11-18 16:32:46

rauf und runter scrollen mit Javascript

Antwort

Verwandte Themen