یکی از کاربردهای جاوا اسکریپت (javascript) در صفحات وب، امکان ایجاد دکمه های کنترلی برای راحتی هر چه بیشتر کاربران، مخصوصا در مورد صفحاتی است که ارتفاع زیادی دارند، از طرفی برخی از طراحان وب علاقمندند که به جهت زیباتر شدن قالب هایشان از این نوع تکنیک ها استفاده نمایند؛ اگر چه برخی ترجیح می دهند از توابع و کتابخانه های جی کئوری (jquery) به جای توابع ساده جاوا اسکریپت بدین منظور استفاده کنند، اما متاسفانه معمولا حاصل کار ایجاد صفحاتی حجیم و در نهایت کندی بارگذاری سایت یا وبلاگ و افزایش استفاده از پهنای باند سرور است؛ به هر صورت در این مطلب قصد داریم انجام این کار را به شما عزیزان آموزش دهیم.
ابتدا در قسمت هدر سایت خود (بین تگ های <head> و <head/>) کتابخانه جی کوئری را ایمپورت کنید (می توانید از فایل و سرور خود نیز استفاده کنید) :
دانلود کنید : لینک دانلود جی کوئری
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
کد زیر را نیز بعد از آن کپی کنید :
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, ۸۰۰); return false; }); }); }); //]]> </script>
سپس استایل css زیر را در صفحه خود ایمپورت نمائید یا بین تگ <style> و <style/> کپی کنید (می توانید آن را مطابق سلیقه خود ویرایش نمائید) :
<style type="text/css"> #back-top { position: fixed; bottom: 10px; margin-left: -150px; } #back-top a { width: 108px; display: block; text-align: center; text-decoration: none; color: #bbb; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; } </style>
حال در بالاترین قسمت صفحه بعد از تگ body یک بلاک با آی دی top بسازید، به طور مثال :
<div id="top"></div>
اکنون در پائین ترین قسمت صفحه قبل از تگ <body/> کد زیر را جهت نمایش دکمه قرار دهید :
<p style="display:block;" id="back-top"> <a href="#top"><span></span>رفتن به بالا</a> </p>
نمونه همین کد را با کمی تغییرات در استایل می توانید در سایت پارس وی پی مشاهده نمائید. امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
حتما بخوانید : جستجو در وردپرس بصورت ایجکسی
نتیجه گیری :
برای سایت هایی که تعداد مطالب بالا دارند و صفحات آنها ارتفاع زیادی دارند استفاده از این ابزار راحتی کاربرانشان را فراهم خواهد نمود.
سئو مبحث مهمی است که باید مطالعه ی زیادی درباره آن داشته باشید تا از راز و رمز آن سر ...
طریقه ساخت برندپیج گوگل پلاس برای سایت های وردپرسی ساخت برند پیج امروزه در سایت های ...
تا حالا پیش آمده که بخواهید تنها بخش کوچکی از مطلب را در لیست نوشته هایتان به نمایش ...
۳۱۸۷
بازدید
۰
دیدگاه
0
علاقه مندی