Skip to content

Instantly share code, notes, and snippets.

@richstrauss
Last active May 6, 2020 04:02
Show Gist options
  • Save richstrauss/15ba8dddaf94f5f6bb10ef14360320fd to your computer and use it in GitHub Desktop.
Save richstrauss/15ba8dddaf94f5f6bb10ef14360320fd to your computer and use it in GitHub Desktop.
Floating Back to Top Button in the Corner
// http://html-tuts.com/back-to-top-button-jquery/
// Add an anchor link somewhere in your HTML page, by adding a unique class name.
// Preferably add it somewhere outside from any containers, so we can add the fixed position to our floating back to top button.
<a href="#" class="back-to-top">Back to Top</a>
// OR, if you don't have access to html source you can create the link using some jQuery.
// Make sure to add the script below above the ending of </body> tag.
// Don't forget to get jQuery library files and add it above the ending tag of </head>.
<script type="text/javascript">
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
</script>
// 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;
});
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;
}
@elbert260
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment