On the template for my new website, it has a smooth scroll function which when clicked on, for example 'view my protfolio' at the top moves down the page to the relevant section clicked on.
However, I am finding this way too slow but can't find in the code where to amend the delay so it scrolls quicker? It seems to sit in 'animate.min.css' but I don't see any timings there.
Have a look in /js/theme.js
/*------------------------
Scroll to top
-------------------------- */
$(function () {
$(window).on('scroll', function(){
if ($(this).scrollTop() > 400) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
});
$('#back-to-top').on("click", function() {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
This is written using jQuery, a framwork that has gone out of fashion.
I converted a similar template to using NodeJS and created a very simple script for the Floating back-to-top button:
<!-- =====Floating back-to-top button===== -->
<button type="button" class="btn btn-primary position-fixed bottom-0 end-0 m-4 rounded-circle" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" style="width: 50px; height: 50px; z-index: 1000; display: none;" id="backToTop">
<i class="fas fa-arrow-up"></i>
</button>
<script>
window.onscroll = function() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
document.getElementById("backToTop").style.display = "block";
} else {
document.getElementById("backToTop").style.display = "none";
}
};
</script>Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices