2016-04-20 14 views
0

Ich habe einige Jquery, die schön scrollt von einem oberen Div zu einem unteren div. Um zu verhindern, dass das Zieldiv für einen Moment blinkt, habe ich einen event.preventDefault eingefügt.jquery scrollen auf Firefox

Dies funktioniert hervorragend auf Chrome und IE, aber nicht Firefox. Wenn ich preventDefault entferne, funktioniert es auch in Firefox, aber der Flash ist zurück.

Ich bin nicht großartig bei Javascript oder jquery, aber gibt es eine Möglichkeit, den Blitz zu verhindern, ohne preventDefault oder eine Möglichkeit, preventDefault in Firefox arbeiten zu bekommen?

<script> 
 
    $(document).ready(function() { 
 
    $("#nextPage").click(function() { 
 
     event.preventDefault(); 
 
     $('html, body').animate({ 
 
      scrollTop: $("#secondContainer").offset().top 
 
     }, 1000); 
 
    }); 
 
     $("#prevPage").click(function() { 
 
     event.preventDefault(); 
 
     $('html, body').animate({ 
 
      scrollTop: $("#firstContainer").offset().top 
 
     }, 1000); 
 
    }); 
 
    }); 
 
</script>
#firstContainer { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100vh; 
 
     background: green; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
     } 
 
     
 
     #secondContainer { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100vh; 
 
     background: blue; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
     } 
 
     
 
     #nextPage { 
 
     position: fixed; 
 
     left: 50%; 
 
     bottom: 2%; 
 
     transform:translateX(-50%); 
 
     -webkit-transform:translateX(-50%); 
 
     -ms-transform:translateX(-50%); 
 
     -o-transform:translateX(-50%); 
 
     -moz-transform:translateX(-50%); 
 
     background: white; 
 
     color: blue; 
 
     } 
 
     
 
     #prevPage { 
 
     position: absolute; 
 
     left: 50%; 
 
     top: 2%; 
 
     transform:translateX(-50%); 
 
     -webkit-transform:translateX(-50%); 
 
     -ms-transform:translateX(-50%); 
 
     -o-transform:translateX(-50%); 
 
     -moz-transform:translateX(-50%); 
 
     background: white; 
 
     color: green; 
 
     }
<div id="firstContainer"> 
 
    <a id="nextPage" href="#secondContainer">Next</a> 
 
</div> <!-- closes #firstContainer --> 
 
    
 
<div id="secondContainer"> 
 
    <a id="prevPage" href="#firstContainer">Previous</a> 
 
</div> <!-- closes #secondContainer -->

Antwort

0

Option 1 könnten Sie die event.preventDefault(); entfernen und die Funktion return false machen.

zB:

Option 3 Entfernen Sie einfach das href Attribut aus dem Anker

$(document).ready(function() { 
    $("#nextPage").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#secondContainer").offset().top 
     }, 1000); 
     return false; 
    }); 
     $("#prevPage").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#firstContainer").offset().top 
     }, 1000); 
     return false; 
    }); 
    }); 

Option 2 Sie stattdessen einen span-Tag verwenden könnte (natürlich das Attribut href Entfernen) (das wird nicht gültig html aber)

HERE ist eine Geige mit der Rückkehr fa lse Option.

+0

Option 1 funktionierte ein Vergnügen, vielen Dank! – DXJ