Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


ssteart

Question

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.

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 1

Hi. Try recreate back to top with this guide.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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).

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...