دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد
آموزش ساخت دکمه Back to Top برای صفحات وب
تاريخ: امروز, : سه شنبه 18 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin
موضوع: آموزش طراحی سایت ,
آموزش ساخت دکمه Back to Top برای صفحات وب
یادگیری طراحی سایت
آموزش ساخت دکمه top ( برگشت به بالا)
در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های Scroll Back To Top Button ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
دکمه ای ایجاد کنید که هنگامیکه کاربر بر روی آن کلیک میکند به بالای صفحه بازگردد.
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</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: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}قدم سوم : کد جاوا اسکریپت را اضافه کنید.
مثال :
//Get the button:
mybutton = document.getElementById("myBtn");
// 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) {
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; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}نمونه یک:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div style="background-color:black;color:white;padding:30px">به پایین بروید</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">این مثال نحوه ایجاد دکمه "پیمایش به بالا" را نشان می دهد<strong> وقتی کاربر شروع به اسکرول صفحه می کند قابل مشاهده می گردد</strong></div>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// 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) {
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;
}
</script>
</body>
</html>
جهت مشاهده تصاویر و خروجی برنامه برروی دوره آموزش طراحی سایت کلیک نمایید
| امتياز : | نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0 |
نمايش اين کد فقط در ادامه مطلب براي قرار کد مورد نظر به ويرايش قالب مراجعه کنيد
مطالب مرتبط
آموزش Image Grid
طراحی شبکه تصاویر واکنش گرا
آموزش ساخت تصاویر لایت باکس
آموزش ساخت Image Modal با استفاده از HTML و CSS3
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت اسلايدشو براي وبسايت
گرد کردن گوشه دکمه ها با CSS
آموزش ساخت دکمه با متن
آموزش ساخت دکمه های تمام عرض در سایت
آموزش طراحی منو برای دکمه بیشتر "More"
