هاك الانتقال لأعلى الصفحة باستعمال مكتبة jQuery

أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة. و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin لإنشاء هذه الإضافة الممتازة. و اعتماداعلى نفس الموضوع سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب. بسم الله نبدأ.

يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.

طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن

]]></b:skin>

و مباشرة تحتها نضيف الكود الموالي

<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery-1.3.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery.scrollTo-1.4.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200,
ieOffset: 50
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.css(&#39;display&#39;,&#39;none&#39;); //in case the user forgot
$(window).scroll(function() {
if(!jQuery.support.hrefNormalized) {
el.css({
&#39;position&#39;: &#39;absolute&#39;,
&#39;top&#39;: $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$(&#39;#top-link&#39;).topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت الانتقال لأعلى الصفحة ، إن أردت رفعهما على استضافتك الخاصة يمكنك تحميلهما من هنا . تحميل الملفين

ثم فوق هذا الكود مباشرة

]]></b:skin>

نضيف كود ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.

#top-link {
display:none;
position:fixed;
right:5px;
bottom:5px;
color:green;
font-weight:bold;
text-decoration:none;
border:1px solid green;
background:Lightgreen;
padding:10px;
}

بعد ذلك نضع كود ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب.

<a href='#top' id='top-link'>إلى الأعلى</a>

طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .

طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت و كودي css و xhtml في القالب.

بقلم جهاد صيام

جهاد صيام 21 سنة ، بلدي هو فلسطين ، أهتم بمتابعة جديد المعلوميات ، تطوير المدونات ، و مصمم صفحات HTML ، و دروس متنوعة حصرية

قسم : ووردبريس