Scroll to top when clicking on the logo

Hi,

In my website header, I have a "fixed position" logo centered (fixed header style - Basic), which means that the logo stays in position when I scroll down.
I am looking to achieve a "scroll to top" effect when I click on the logo, is that possible ?
Note that I don't have the code injection feature available.

Many thanks in advance.

Can you share site url?

Hi @tuanphan
Of course: 
https://andreadeletang.com
password: goodvibes

Thanks a lot.

You mean

When users scroll down >> If they click on logo >> it will scroll to top of page without reloading the page?

Yes exactly, and I would like this same behaviour on every pages.

Thanks.

On 9/11/2024 at 9:06 PM, a_dltg said:

Yes exactly, and I would like this same behaviour on every pages.

Thanks.

Try this to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div.header-title a').attr('href','#');
});
</script>

Hi @tuanphan thanks for this, as I said I don't have the code injection feature in my plan.

So I was wondering if there is another way of achieving this.

Thanks

On 9/13/2024 at 6:17 PM, a_dltg said:

Hi @tuanphan thanks for this, as I said I don't have the code injection feature in my plan.

So I was wondering if there is another way of achieving this.

Thanks

You can edit Site Footer > Add a Block > Choose Markdown > Paste the code

Hi @tuanphan thanks!

It looks like it works only one time when I click on it, the second time it doesn't work, I need to refresh the page.

Do you have any idea on how to fix it ?

@tuanphan it looks like it's more related to the browser in fact, because it works fine with Chrome! 🙂

However, is is possible to reduce the speed of the 'back to top' effect ?

Thanks!

23 hours ago, a_dltg said:

@tuanphan it looks like it's more related to the browser in fact, because it works fine with Chrome! 🙂

However, is is possible to reduce the speed of the 'back to top' effect ?

Thanks!

You can use this to Website Tools > Custom CSS

html {
  scroll-behavior: smooth;
}

@tuanphan thank you so much, it works perfectly!