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 -->
Option 1 funktionierte ein Vergnügen, vielen Dank! – DXJ