Hi,

I have created a floating button that scrolls down to the #welcome section of my homepage when clicked.

How can I make the scroll smooth rather than just appearing at that section? I have tried the following property: 

scroll-behaviour: smooth;

 

Thanks in advance :-)

Can you dump your entire code here? I'll take a look at that for you. 

Based upon your description I'm not fully sure what you are trying to achieve, but I am struggling to understand why you would want to make a user click twice to interact with a button? That'd annoy the hell outta me, personally. 

You don't need to click the button twice. I meant when you click the button the page will scroll to the #welcome section. It is working correctly, I would just like the page to scroll smoother.

Um, jQuery is all I sort of know;

$(document).ready(function(){
	$(".slideto").click(function(event) {
		event.preventDefault();
		var wh = $(this).attr("href");
		var trimmed = wh.substring(1);
		$("html, body").animate({ scrollTop: $(wh).offset().top - 20}, 1000, function(){ $(wh).focus(); });
	});
});

just add the class slideto on the link

Edited September 19, 20187 yr by BrowserBugs

16 hours ago, BrowserBugs said:

Um, jQuery is all I sort of know;

$(document).ready(function(){
	$(".slideto").click(function(event) {
		event.preventDefault();
		var wh = $(this).attr("href");
		var trimmed = wh.substring(1);
		$("html, body").animate({ scrollTop: $(wh).offset().top - 20}, 1000, function(){ $(wh).focus(); });
	});
});

just add the class slideto on the link

Thank you, this worked