Last active
May 6, 2020 04:02
-
-
Save richstrauss/15ba8dddaf94f5f6bb10ef14360320fd to your computer and use it in GitHub Desktop.
Floating Back to Top Button in the Corner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The jQuery | |
// Remember that the back to top button has "display: none;" in CSS, to hide it when the page loads. | |
// So, to make it visible when you scroll the page down when need to check, using jQuery, after how many pixels the back to top button should appear. | |
// To do that we need a scroll() function event and an if statement to check the amount scrolled down. | |
var amountScrolled = 300; | |
$(window).scroll(function() { | |
if ( $(window).scrollTop() > amountScrolled ) { | |
$('a.back-to-top').fadeIn('slow'); | |
} else { | |
$('a.back-to-top').fadeOut('slow'); | |
} | |
}); | |
// The Animated Effect | |
// Now that we have our back to top button in place, we need to add the jQuery animation effect when the page is returning to top. | |
// This must be added on a click event, so when the button is clicked, code should be triggered. | |
$('a.back-to-top').click(function() { | |
$('html, body').animate({ | |
scrollTop: 0 | |
}, 700); | |
return false; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a.back-to-top { | |
display: none; | |
width: 60px; | |
height: 60px; | |
text-indent: -9999px; | |
position: fixed; | |
z-index: 999; | |
right: 20px; | |
bottom: 20px; | |
background: #27AE61 url("up-arrow.png") no-repeat center 43%; | |
-webkit-border-radius: 30px; | |
-moz-border-radius: 30px; | |
border-radius: 30px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I filled out a form then verify click to verify click back start from the beginning. I'm trying to hold one thing while doing another without losing my work can this help in any way.