michael2019 7 Share Posted November 6, 2020 Site URL: https://tarantula-quillfish-w6xe.squarespace.com/ I added a "scroll to top" button on my page but I would like to have it fade in as you scroll down to make it appear. Right now it just pops up quickly. URL: https://tarantula-quillfish-w6xe.squarespace.com/ PW: !GCet0@E#8 Thank you in advance. Link to post
0 bangank36 587 Share Posted November 7, 2020 (edited) In your footer script change it to this code <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 > 20 || document.documentElement.scrollTop > 20) { document.getElementById("myBtn").style.opacity = "1"; } else { document.getElementById("myBtn").style.opacity = "0"; } } function topFunction() { $('html,body').animate({ scrollTop: 0 }, 1000); } </script> And in the custom css, modify accordingly #myBtn { width: 50px; height: 50px; transition: opacity 0.5s ease-in-out; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; font-size: 25px !important; color: #fff; cursor: pointer; padding: 10px 10px 10px 11px; border-radius: 0%; box-shadow: 1px 1px 2px #000; background-color: #a1d941; opacity: 0; } Edited November 8, 2020 by bangank36 Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to post
0 michael2019 7 Author Share Posted November 8, 2020 I made the changes you suggested but now the scroll button isn't appearing. Any thoughts? Link to post
0 bangank36 587 Share Posted November 8, 2020 I made a mistake on this line. please change it to 0, also remove !important in opacity css of #myBtn Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to post
0 michael2019 7 Author Share Posted November 8, 2020 (edited) That did it. It looks great. Couldn't figure it out. Thank you so much. Edited November 8, 2020 by michael2019 bangank36 1 Link to post
Question
michael2019 7
Site URL: https://tarantula-quillfish-w6xe.squarespace.com/
I added a "scroll to top" button on my page but I would like to have it fade in as you scroll down to make it appear. Right now it just pops up quickly.
URL: https://tarantula-quillfish-w6xe.squarespace.com/
PW: !GCet0@E#8
Thank you in advance.
Link to post
Top Posters For This Question
3
2
Popular Days
Nov 8
3
Nov 6
1
Nov 7
1
Top Posters For This Question
michael2019 3 posts
bangank36 2 posts
Popular Days
Nov 8 2020
3 posts
Nov 6 2020
1 post
Nov 7 2020
1 post
Popular Posts
michael2019
That did it. It looks great. Couldn't figure it out. Thank you so much.
Posted Images
4 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment