How can I make a back to top button disappear when close to the header?

Site URL: https://www.ssteart.com

I have created a back to top button on my site using this code:

Quote

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">
    <i class="fa fa-chevron-up"></i>
</button>
  
  <script>
   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {
      if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
         document.getElementById("myBtn").style.opacity = "50%";
      } else {
         document.getElementById("myBtn").style.opacity = "0";
      }
   }

   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 1000);
   }
</script>

 

While it works great in pretty much every way I found that when moving to another page the button is already there as soon as the new page loads (it should appear while scrolling down).
If I start scrolling down and then up it starts behaving normally, but I would like to fix it so that when loading a page the button doesn't show up unless I scroll down a bit.

Would that be possible? Thank you.

Hi. Try recreate back to top with this guide.

hey @tuanphan, I see your back to top button referenced all over. 

I added it to my site, including the extra JS. Mostly works, but upon page load, the ^top button appears on the hero. It briefly fades out when you scroll before reappearing. I would like it to be hidden until you get towards the bottom of the page. Any tips on where to fix this? Thanks.

site: https://clairepattee-wip.squarespace.com/

pw: cpc2021

On 6/25/2021 at 7:09 AM, taylorroy said:

hey @tuanphan, I see your back to top button referenced all over. 

I added it to my site, including the extra JS. Mostly works, but upon page load, the ^top button appears on the hero. It briefly fades out when you scroll before reappearing. I would like it to be hidden until you get towards the bottom of the page. Any tips on where to fix this? Thanks.

site: https://clairepattee-wip.squarespace.com/

pw: cpc2021

Try Design > Site Styles > Disable Ajax Loading & check again.

8 hours ago, tuanphan said:

Try Design > Site Styles > Disable Ajax Loading & check again.

Hm, Ajax loading was already disabled. I turned it on + off again, but it still displays on page load (then when you scroll, it fades out for a moment before reappearing).

On 5/21/2021 at 10:10 PM, tuanphan said:

Hi. Try recreate back to top with this guide.

Hello @tuanphan Thanks a lot for the guide. I have successfully used it on my site : https://www.herchyun.com/

I do have a question. When I click that ''Top'' button, the screen jumps back to the top immediately. Instead of jumping, is there any way to scroll slowly back to top? 

One example I see is here : https://www.ssteart.com/gallery/traditional

Thank you so much! 

On 11/26/2021 at 10:28 AM, belleaccent said:

Hello @tuanphan Thanks a lot for the guide. I have successfully used it on my site : https://www.herchyun.com/

I do have a question. When I click that ''Top'' button, the screen jumps back to the top immediately. Instead of jumping, is there any way to scroll slowly back to top? 

One example I see is here : https://www.ssteart.com/gallery/traditional

Thank you so much! 

Try adding this to Design > Custom CSS

html {
  scroll-behavior: smooth;
}

On 11/27/2021 at 5:09 PM, tuanphan said:

Try adding this to Design > Custom CSS

html {
  scroll-behavior: smooth;
}

 

That works perfectly! Thank you so much!