हेल्लो दोस्तों आज हम अपने इस आर्टिकल के माध्यम से आपको बताएँगे की अपने ब्लॉगर या वेबसाइट में कैसे Top बटन को बनाये जिसको HTML एवं CSS Code के माध्यम से बनाया गया है
Scroll Down Top Button Demo
आप यहाँ नीचे Top बटन का demo देख सकते है इसके लिए आपको demo area पर स्क्रॉल करना होगा
Scroll Down Top Button CSS Code
नीचे दिए गए CSS Code के माध्यम से आप बटन को कस्टमाइज कर सकते है
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 60%;
}
#myBtn:hover {
background-color: #dc35458c;
}
दिए गए इस #myBtn style से आप बटन का color, position,font-size, z-index,cursor तथा text color जैसे style को अपने अनुसार सेट कर सकते है
#myBtn:hover इस style में आप बटन के hover effect के color को change कर सकते है
Scroll Down Top Button HTML Code
HTML में जो आपको Use करने वाला element है use हम नीचे दे रहे है
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
इसके बाद आपको Java Code को Use करना है
Scroll Down Top Button Java Code
नीचे दिए गए Java Code को आपको उपरोक्त HTML एवं CSS Code में Add करना है
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
इस तरह से हमारा Scroll Down Top Button HTML CSS एवं Java Code के माध्यम से तैयार हो गया है
Scroll Down Top Button Source Code
उपरोक्त Code का Compile नीचे Source Code Area में दिया गया है आप चाहे तो Copy Code पर Click करके उपरोक्त सभी Code को Copy कर सकते है