رفع الصفحه للاعلى من w3schools How To Create a Scroll To Top Button

بواسطه :صفحات هايف -
0
اضفه بالجافا سكربت وخله تحت اخر شي : ويمكنك برمجته داخلي
HTML/JavaScript
 
 <style>
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 }
 #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: 4px;
 }
 #myBtn:hover {
 background-color: #555;
 }
 </style>
 </head>
 <body>
 <button onclick="topFunction()" id="myBtn" title="للاعلى">للاعلى</button>
 <script>
 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";
 }
 }
 function topFunction() {
 document.body.scrollTop = 0;
 document.documentElement.scrollTop = 0;
 }
 </script>

 المصدر
 https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

القسم :

إرسال تعليق

أحدث أقدم