پاسخ ها ( 2 )

  1. SOLTANE GHALBHA
    0
    2018-05-31T08:14:16+03:30
    پاسخ

    سلام

    توسط کد زیر میتونید این نمونه رو در سایت خودتون پیاده سازی کنید:

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Tahoma;
  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">رفتن به بالا</button>

  <div style="background-color:black;color:white;padding:30px; text-align:center">رفتن به بالای سایت</div>
  <div style="background-color:lightgrey;padding:30px 30px 2500px;text-align:center; direction:rtl ">نمونه کد اسکرول به اول صفحه <br> کار کرد کد به این صورت است که زمانی که به سمن پایین اسکرول میکنیم و صفحه 20 پیکسل از اول صفحه فاصله میگیره کد نمایش داده میشه <br> سوالی در رابطه با کد داشتید در سایت بپرسید
    <br> www.beporsam.ir <br>
    <a href="https://beporsam.ir/?p=6269" target="_blank" >دانلود کد</a>
  </div>

<script>
// زمانی که سایت اسکرول میشه و 20 پیکسل از بالای سایت ارتفاع شروع میشه
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";
    }
}

// هنگامی که کاربر روی دکمه کلیک میکنه
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>


    آموزش استفاده:

    • ابتدا کدهای زیر را در فایل css قالب خود قرار دهید:
    #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;
}
    • سپس کد HTML و جاوا اسکریپت را در فایل قالب قرار بدید(بستگی به ساختار سایت شما داره که کدها رو کجا میخواید بزارید تا نمایش داده بشه):
    <button onclick="topFunction()" id="myBtn">رفتن به بالا</button>
<script>
// زمانی که سایت اسکرول میشه و 20 پیکسل از بالای سایت ارتفاع شروع میشه
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";
    }
}

// هنگامی که کاربر روی دکمه کلیک میکنه
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

    موفق باشید

    بهترین پاسخ
    • آرش
      0
      2018-06-01T10:50:33+03:30
      پاسخ
      این پاسخ ویرایش شد.

      سلام ممنون خیلی بدردم خورد فقط چجوری باید بهش انیمیشن بدم که آروم بره بالا نه این که یهویی بره بالا

      ممنون

  2. جواد
    1
    2018-05-31T11:47:43+03:30
    پاسخ

    روش ساده تری هم برای این کار هست البته افکت خاصی نداره میشه افکت رو با css بهش اضافه کرد مثلا

    این کد رو بالای صفحه قرار می دید

    <a name="top"></a>

    و این کد رو پایین صفحه قرار بدید تا به بالا هدایت کنه

    <a href="#top">بازگشت به بالا</a>

    آموزش کامل رو در این لینک ببین 

     

ارسال یک پاسخ