Created
May 10, 2018 13:34
-
-
Save thanhcs94/56eba0d34452e861021ce56987d5e070 to your computer and use it in GitHub Desktop.
Scroll to top button
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
/* button onClick="ga('send', 'event', 'btn_scroll', 'click', 'scroll_to_top')" */ | |
<button onclick="topFunction()" id="myBtn" title="Go to top">NHẬN ƯU ĐÃI NGAY</button> | |
/* CSS */ | |
#myBtn { | |
display: none; /* Hidden by default */ | |
position: fixed; /* Fixed/sticky position */ | |
bottom: 20px; /* Place the button at the bottom of the page */ | |
right: 30px; /* Place the button 30px from the right */ | |
z-index: 99; /* Make sure it does not overlap */ | |
border: none; /* Remove borders */ | |
outline: none; /* Remove outline */ | |
background-color: #63BE9E; /* Set a background color */ | |
color: white; /* Text color */ | |
cursor: pointer; /* Add a mouse pointer on hover */ | |
padding: 10px; /* Some padding */ | |
border-radius: 8px; /* Rounded corners */ | |
font-size: 18px; /* Increase font size */ | |
} | |
#myBtn:hover { | |
background-color: #555; /* Add a dark-grey background on hover */ | |
} | |
/* JS */ | |
// When the user scrolls down 20px from the top of the document, show the button | |
window.onscroll = function() {scrollFunction()}; | |
function scrollFunction() { | |
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | |
document.getElementById("myBtn").style.display = "block"; | |
} else { | |
document.getElementById("myBtn").style.display = "none"; | |
} | |
} | |
// When the user clicks on the button, scroll to the top of the document | |
function topFunction() { | |
document.body.scrollTop = 0; // For Safari | |
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
cool