افزودن آیکون رفتن به بالای صفحه در قالب سایت

شاید در خیلی سایت ها دیده باشید که وقتی Scroll به پایین صفحه منتقل میشود، دکمه ای تحت عناوینی مانند “رفتن به بالا صفحه” ظاهر می شود که با کلیک روی آن به ابتدای صفحه خواهید رفت. اما چگونه این کار را انجام دهیم؟

شما با چند خط HTML, CSS و جاوااسکریپت می توانید این کار را انجام دهید. شما ابتدا باید این کد جاوا را در Header قالب سایتتان قرار دهید:

$(document).ready(function () {

   $(window).scroll(function () {
       if ($(this).scrollTop() > 200) {
          $(‘.scrollup’).fadeIn();
       } else {
          $(‘.scrollup’).fadeOut();
       }
  });

   $(‘.scrollup’).click(function () {
       $(“html, body”).animate({
          scrollTop: 0
       }, 600);
       return false;
    });
});

سپس این کد را در قالب سایت خود قرار دهید: بطور مثال در فایل Index

<a href=”#”>Scroll</a>

و در نهایت این کد را در فایل CSS خود کپی نمایید:

.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url(‘icon_top.png’) no-repeat;
    background-color: #000;
}

پاسخ دهید

*