Smooth Scroll on website

[default7nqh1e6u4o3l]

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.

url: https://kylehawkinscreative.com/

[BenPleysier · Accepted solution]

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>

[default7nqh1e6u4o3l]

Brilliant, found it and managed to alter the speed. Thank you.